jQuery: clicking nested elements

Question

I have the following markup

    

        @qItem.CategoryText
        

        

Answer 1

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

Answer 2

$(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)

Answer 3

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

Answer 4

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.

Answer 5

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