div .click function not working

Question

I am trying to call a DIV .click function, but it doesn't work. The div that I'm talking about is created with PHP.

This is the result from the PHP:

<div style="position:relative;width:700px;" id="colorcontainer">
<div class='color' style='background: url(kleuren/c121.jpg); background-size: 100 72; background-repeat:no-repeat;'><span class='txt'>CBM 121<br />Blank Gelakt Eiken</span></div>
</div>

Now I try to call the div .click function:

<script type="text/javascript">
$(document).ready(function(){
    $('#colorcontainer > div').click(function() {
        var name = this.css('background-image');
        alert(name);
    });
});

Now it does not show the alert at all. What am I doing wrong here? I've tried it without the document.ready, with .color and all sorts of stuff, but it just doesn't call the function.

not sure why your alert isnt shown, but if you figure this one out, you have to set background-image to 'none' afaik to hide it. — Rufinus
– Rufinus, Commented Dec 13, 2011 at 9:39

Prisoner · Accepted Answer · 2011-12-13 09:39:29Z

3

You shouldn't use this, it should be $(this). Here is a working demo of your code.

answered Dec 13, 2011 at 9:39

Prisoner

27.7k11 gold badges78 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dknaack · Accepted Answer · 2011-12-13 09:40:46Z

2

To ensure the use of jQuery. Use $(this) instead of this.

So

var name = $(this).css('background-image');

will work

answered Dec 13, 2011 at 9:40

dknaack

60.7k28 gold badges166 silver badges211 bronze badges

Comments

Pavan · Accepted Answer · 2011-12-13 09:41:00Z

2

Try this code

$(document).ready(function(){ 
    $('#colorcontainer > div').click(function() { 
        var name = $(this).css('background-image'); 
        alert(name); 
    }); 
});

answered Dec 13, 2011 at 9:41

Pavan

4,3391 gold badge24 silver badges25 bronze badges

Comments

Alfabravo · Accepted Answer · 2011-12-13 09:53:07Z

2

Your javascript should be

$(document).ready(function(){
    $('#colorcontainer > div').click(function() {
        var name = $(this).css('background-image');
        alert(name);
    });
});

answered Dec 13, 2011 at 9:53

Alfabravo

7,5786 gold badges49 silver badges83 bronze badges

Comments

Mark Adesina Omoniyi · Accepted Answer · 2011-12-13 10:22:50Z

1

I think for performance purpose you should call the div that contained the background-image like below:

$('.color').click(function () {
     var name = $(this).css('background-image');
     alert(name);
});

answered Dec 13, 2011 at 10:22

Mark Adesina Omoniyi

4491 gold badge7 silver badges22 bronze badges

Comments

Romeo Besty · Accepted Answer · 2013-06-09 11:47:48Z

0

Its long ago the post has been answered. But just in case if someone come across something similar. No doubt the answer to the above question are perfectly stated but want to share few more tips to it.(if u don't have any syntax error - Try below methods to see if click event is firing or not) 1) just below the click event, write alert and see. this ensures that nothing before the click event is wrong. 2) look if the selector you mentioned exists. here $('.color') so there should be

answered Jun 9, 2013 at 11:47

Romeo Besty

1

Collectives™ on Stack Overflow

div .click function not working

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related