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

Question

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

I believe this is just a misunderstanding of event delegation. Your first example attaches an event to each `li` at the time that line is run. Because of this, `li` elements added afterwards will not have the event. Your second example attaches it to the `ul`, which is correct, as the `ul` will not change. If you were to add more `ul` elements dynamically, they would not have the event either. — Tyler Roper, Jul 09 '18 at 15:39
Ohh I get it now. Thanks. You can convert your comment to answer so that I can accept it. — Ajay Kudva, Jul 09 '18 at 15:44
`$(document).on('click', 'ul span', e => {})`, attatching the click listener to the `document` and then passing `ul span` as the filter selector, the elements that get dynamically added will inherit this event. — Alex, Jul 09 '18 at 15:48
To be more precise the parent element to be selected for the event delegation should be static and not dynamic. — Ajay Kudva, Jul 09 '18 at 15:49
Hello Alex! Thank you for your response. I was unaware on $(document) selections. I am not used to such selections. — Ajay Kudva, Jul 09 '18 at 15:50
@TylerRoper I would like to accept your answer if you please convert your comment to answer. — Ajay Kudva, Jul 09 '18 at 15:54
@AjayKudva No worries. This is a common question and I appreciate your interest in marking my comment as a solution, but truthfully I think you may be best off simply removing the question - the solution is more than sufficiently documented [here](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements). — Tyler Roper, Jul 09 '18 at 16:02
@TylerRoper I appreciate your view. Just one question though. I have used the event.stopPropogation() here. Can I place it anywhere in the function I am using? — Ajay Kudva, Jul 09 '18 at 16:12
I'm not sure how propogation with delegation works. I would imagine the event has already propogated up to the `ul` in order for the event to fire in the first place, but I could be wrong. — Tyler Roper, Jul 09 '18 at 16:50
@AjayKudva I have posted it as an answer if you are still looking to accept one — M Goward, Jul 09 '18 at 20:11

score 1 · Answer 1 · edited Jul 09 '18 at 17:01

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

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

1 Answers1