jQuery: clicking nested elements

Question

I have the following markup

<ol>
    <li class="ListItem">
        <span class="sub">@qItem.CategoryText</span>
        <input type="image" src="http://icons.iconarchive.com/icons/tatice/just-bins/256/bin-red-full-icon.png" width="30" class="deleteIcon" name="QuestionId" value="@qItem.Id" />
    </li>
</ol>

and the following script

$(".ListItem").click(function(){
doActionA();
});

$(".deleteIcon").click(function(){
doActionB();
});

When I click in image, it also triggers click of ListItem. I understand this is because image is inside ListItem. but I want ListItem's click not to be fired when image is clicked. Is there any way to do that ?

Arvind Bhardwaj · Accepted Answer · 2013-01-08 06:28:35Z

24

$(".deleteIcon").click(function(e){
    doActionB();
    e.stopPropagation();
});

answered Jan 8, 2013 at 6:28

Arvind Bhardwaj

5,3215 gold badges38 silver badges50 bronze badges

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

Comments

Adil · Accepted Answer · 2013-01-08 06:55:03Z

5

You need to use event.stopPropagation() to prevents the event from bubbling up the DOM tree.

$(".deleteIcon").click(function(event){
    event.stopPropagation()
    doActionA();    
});

The event you binded with delete icon is firing the parent event binding with ListItem, so you need to stop propagation for parent event when child is source of event.

edited Jan 8, 2013 at 6:55

answered Jan 8, 2013 at 6:28

Adil

148k25 gold badges217 silver badges207 bronze badges

5 Comments

Arvind Bhardwaj Over a year ago

he wants to prevent click event of parent when clicked on child. Dont you think the event.stopPropagation() should be added on child's click?

Adil Over a year ago

The event binding will child will not trigger event for parent.

Arvind Bhardwaj Over a year ago

I think it does, look at this: jsfiddle.net/arvind07/WtxLC Try commenting the event.stopPropagation()

Adil Over a year ago

I could not see the code in jsFiddle there is something wrong ?

Arvind Bhardwaj Over a year ago

I have used stopPropagation on .deleteIcon. Can you explain why it worked? And if I remove it from there parent handler is also called.

Henk Tillman · Accepted Answer · 2015-08-05 16:37:15Z

1

$(document).on("click", ".deleteIcon", function() {
  doActionB();
});

This method is the only one I found to work with nested elements, especially those generated by a library such as Pivottable (https://github.com/nicolaskruchten/pivottable)

answered Aug 5, 2015 at 16:37

Henk Tillman

112 bronze badges

Comments

Anujith · Accepted Answer · 2013-01-08 06:39:21Z

0

$(".deleteIcon").click(function(){
    doActionA();
    return false;  
});

edited Jan 8, 2013 at 6:39

answered Jan 8, 2013 at 6:30

Anujith

9,3686 gold badges36 silver badges48 bronze badges

Comments

user2408157 · Accepted Answer · 2013-05-22 06:03:05Z

0

Use .one(), as directed in the JQuery documentation.

answered May 22, 2013 at 6:03

user2408157

1

Collectives™ on Stack Overflow

jQuery: clicking nested elements

5 Answers 5

Comments

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related