Function triggering in jquery?

Question

In My jquery function i used to trigger click function from li and img seperately but unfortunately when i click image. Click function for list also triggers

HTML CODE:

  <li id="list_id">List_text<img src='image.jpg' id="img_id"></li>

Jquery function:

$("#list_id").click(function(){
 alert('List is clicked');
});

$("#img_id").click(function(){
 alert('Image is clicked');
});

Once i click image both function triggers.

*Question:*I need to trigger only click function for image once i click image and to trigger click function for list once i click list

i somewhere read stopPropagation is better than return false ,i will get you the link — kobe
– kobe, Commented Dec 7, 2010 at 8:03

Darin Dimitrov · Accepted Answer · 2010-12-07 07:58:55Z

2

You need to stop the event propagation:

$("#img_id").click(function(evt){
    alert('Image is clicked');
    evt.stopPropagation();
});

answered Dec 7, 2010 at 7:58

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

2 Comments

Mohan Ram Over a year ago

Still it calls li click function. Since i get li and img from ajax. i think its not working

Darin Dimitrov Over a year ago

What do you mean that you are getting li and img from AJAX? When do you attach the click handler? And here's a working demo.

kobe · Accepted Answer · 2010-12-07 08:00:18Z

0

use event.stopPropagation();

     $("#img_id").click(function(){
             alert('Image is clicked');
  event.stopPropagation();
            });

answered Dec 7, 2010 at 8:00

kobe

15.9k15 gold badges67 silver badges93 bronze badges

1 Comment

Mohan Ram Over a year ago

Still it calls li click function. Since i get li and img from ajax. i think its not working

deceze · Accepted Answer · 2010-12-07 08:01:24Z

0

$("#img_id").click(function(){
  alert('Image is clicked');
  return false;
});

Just return false from the function, which will prevent the event from bubbling up (among preventing other default actions, if that's what you want).

answered Dec 7, 2010 at 8:01

deceze♦

525k89 gold badges806 silver badges954 bronze badges

2 Comments

kobe Over a year ago

stopPropagation is better than return false as it kills all the futured...events for that

deceze Over a year ago

@gov Depends on what exactly the OP wants, added a note to my answer.

Collectives™ on Stack Overflow

Function triggering in jquery?

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related