jQuery .click() event

Question

I'm a bit confused with jQuery's .click() event. I'm trying to use the event on an image inside a span. This is the line of HTML containing the span and image.

<span class="content-message-element"><a href=""><img class="content-message-icon" src="./images/icon_close.png" alt="Close Message" /></a></span>

As you can see, the image has the class 'content-message-icon'. I've used this in my jQuery code (by the way - I have jQuery 1.7.1 included) but nothing happens ; the event is not triggered at all.

Is the .click() event limited to certain types of elements?

<script type="text/javascript">
        $(".content-message-icon").click(function() {
            alert("Handler for .click() called.");
        });
    </script>

This is my jQuery, any help is appreciated.

Try placing document.ready call before the click function. — prasvin
– prasvin, Commented Feb 17, 2012 at 5:14
i guess .click event not works with the class..u should use id only... — thecodejack
– thecodejack, Commented Feb 17, 2012 at 5:15
@CodeJack, that's simply not the case. the click event works as written. — nathan gonzalez
– nathan gonzalez, Commented Feb 17, 2012 at 5:16

Christian · Accepted Answer · 2012-02-17 05:15:58Z

3

The click event should work fine. Try putting in the document ready code, like so:

$(function() {
    $(".content-message-icon").click(function() {
        alert("Handler for .click() called."); 
    });
});

Example with jsFiddle: http://jsfiddle.net/vGPfu/1/

answered Feb 17, 2012 at 5:15

Christian

19.8k3 gold badges57 silver badges70 bronze badges

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

2 Comments

Blake Over a year ago

Awesome, works perfectly! I guess I have a little way to go with jQuery :P

Christian Over a year ago

Everyone has to start somewhere :). It's good to understand why code must be put in the document ready function, reading this page should give you a bit more info.

Vivek · Accepted Answer · 2012-02-17 05:16:19Z

2

it may happen that u r firing click event before the DOM is ready. Use this ans

$(document).ready(function(){
        $('.content-message-icon').click(function(){
              //add click logic here
        });
});

answered Feb 17, 2012 at 5:16

Vivek

6411 gold badge12 silver badges24 bronze badges

1 Comment

Vivek Over a year ago

@CodeJack click function has no restrictions it can be fired on anything i.e id,class,DOM element lyk anchor tag,div, span etc

Shaheer · Accepted Answer · 2012-02-17 05:16:36Z

1

you are not using

$(document).ready()

answered Feb 17, 2012 at 5:16

Shaheer

2,1474 gold badges25 silver badges39 bronze badges

Comments

nnnnnn · Accepted Answer · 2012-02-17 05:36:25Z

Other answers have mentioned using jQuery's document ready, but nobody (yet) has explained why, or what the other way to do it is. So: you can't reference an element from JavaScript (with or without jQuery) if the element has not been parsed yet. To assign an event handler (or do any other element manipulation from JS) the two ways to be sure the element has been parsed are:

Put the script block after the element in the page source - anywhere after will work, but after all elements and just below the closing </body> tag is reasonably standard.
Put the relevant code in a $(document).ready() handler (if using jQuery) or in an onload handler.

(The document ready handler is created at the point where that code is included, even before the elements it manipulates have been parsed, but it doesn't get executed until the whole document is ready.)

aar · Accepted Answer · 2012-02-17 05:14:11Z

0

Try taking out the empty tag. The behavior of might be interfering here.

answered Feb 17, 2012 at 5:14

aar

3221 silver badge7 bronze badges

2 Comments

Blake Over a year ago

Are you referring to the <a> tag? That was there to make it seem clickable, I don't know if there's an alternate way to make it obvious my image can be clicked. I removed the tag and I still get the same behavior, though.

Shaheer Over a year ago

you can use css to make it "look" like a link.

Bert · Accepted Answer · 2012-02-17 05:21:58Z

0

This should work working..

Possible cause.. Jquery version = try other Browser Problem = try all browser

enclose into this jquery

$(document).ready(function()
{
  ...click event
});

answered Feb 17, 2012 at 5:21

Bert

1,0393 gold badges14 silver badges27 bronze badges

Comments

bluish · Accepted Answer · 2012-07-24 08:06:58Z

0

Try this

<script type="text/javascript">
  $(".content-message-icon").live("click", function () {
    alert("Handler for .click() called.");
  });
 </script>

edited Jul 24, 2012 at 8:06

bluish

27.5k28 gold badges126 silver badges185 bronze badges

answered Feb 17, 2012 at 5:20

Sreenath Plakkat

1,7855 gold badges20 silver badges31 bronze badges

Collectives™ on Stack Overflow

jQuery .click() event

7 Answers 7

2 Comments

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related