CODEWITHSUNDEEP
javascriptjquery
Ajay Kudva
Ajay Kudva

Reputation: 179

Why does the click listener doesn't work for parent element as li?

$("li").on("click",'span',function(event){
    event.stopImmediatePropagation();
    $(this).parent().fadeOut(function(){
        $(this).remove();
    }); 
});

So I have used a click listener for deleting a to-do.

The to-do html contains nested span inside the li for the trash icon.

For the 'click' listener for span I've used the 'li' as the parent element. But the event listener doesn't work anymore for dynamically added elements.

I've observed that it works perfectly if I chose the parent element as 'ul' :

$("ul").on("click",'span',function(event){
    event.stopImmediatePropagation();
    $(this).parent().fadeOut(function(){
        $(this).remove();
    }); 
});

Here is the code snippet: https://codepen.io/AjayKudva/pen/MBgrdW

Upvotes: 1

Views: 108

Answers (1)

M Goward
M Goward

Reputation: 308

From what I understand you are wanting the dynamically added li tag to be deleted when the span is clicked. For this work you need to reference a parent that is static. If you are okay with referencing the ul as the parent then that will work.

https://jsfiddle.net/theBestOfThem/cebv78j4/ 

$("ul").on("click",'span',function(event){
  event.stopImmediatePropagation();
  $(this).parent().fadeOut(function(){
    $(this).remove();
  });   
});

shows that referencing the ul works.

I hope this helps

Upvotes: 1

Related Questions