Click Event doesn't working for dynamically generated id of an span element

Question

I am working on To Task Project.

Here i added items dynamically and also generated items and dynamically. But when i want to delete items by clicking on a span element.

This click doesn't work.

I search each and every solution regarding this issue but none of them meets my requirement as i want.

 $("[id^=remove_]").click(function() { alert("working"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="task-list"> <li class="task" id="item_1"><span class="delete-todo" id="remove_1">X</span><span class="main-task">3232</span></li><li class="task" id="item_2"><span class="delete-todo" id="remove_2">X</span><span class="main-task">djkhjsh</span></li> <li class="task" id="item_3"><span class="delete-todo" id="remove_3">X</span><span class="main-task">snsajdsakm</span></li><li class="task" id="item_4"><span class="delete-todo" id="remove_4">X</span><span class="main-task">sahgsabsa\\</span></li> <li class="task" id="item_5"><span class="delete-todo" id="remove_5">X</span><span class="main-task">sjghjdsn</span></li> </ul>

I tried this. But It is not working. Can someone explain me why its not working.

NB: I tried several solution found on SO.

Answer 1

Select the remove button by class, not ID. And change the code to use .on() method that is bound to the document so all elements can be selected as following:

$(document).on('click', '.delete-todo', (function() {
    alert("working");
});

Answer 2

Delegate events to an ancestor tag that all clickable tags have in common. By doing so, allows any tags nested within the ancestor tag to be clickable (including tags that are added dynamically later on). In order to pinpoint the clicked tag, $(this) always points to the tag the user currently clicked (in this case this = event.target = "currently clicked tag" ). By using this pattern, #id is pointless and .class a more efficient and versatile selector.

Anotomy of jQuery event delegation

//$('ancestor-selector').on('event', 'target-selector', callback);

<ul class="list">
  <li class="task"><b class="delete">X</b>Item</li>
  <li class="task"><b class="delete">X</b>Item</li>
  <li class="task"><b class="delete">X</b>Item</li>
</ul>

$('.list').on('click', '.delete', deleteTask);

---

Demo

Details commented in demo

 /* Delegate the click event (ie .on('click',...)) to the ancestor tag (ie .list) of all clickable tags (ie .delete) NOTE: callback function (ie deleteTask) does NOT have "()" because it is called when the event is triggered. deleteTask() would be triggered immediately (which is not desired) */ $('.list').on('click', '.delete', deleteTask); /* Although this callback function doesn't use the event object, it is passed by default and it's just a personal habit of mine to always include it when defining a callback/event handler. $(this) | in this case points to the tag the user clicked (aka event.target) .closest('.task') | will traverse up the DOM to find the first tag matching .task .remove() | self explanitory */ function deleteTask(event) { $(this).closest('.task').remove(); } /* This code is to dynamically add items to list for demonstration purposes and is not required as part of the solution to OP question */ $('.add').on('click', function(event) { $('.list').append(`<li class='task'><b class='delete'>X</b> Dynamically added list item</li>`); });

 .delete { display: inline-block; padding: 1px 3px; cursor: pointer }

 <ul class="list"> <li class="task"><b class="delete">X</b> 1010</li> <li class="task"><b class="delete">X</b> 2929</li> <li class="task"><b class="delete">X</b> 3838</li> <li class="task"><b class="delete">X</b> 4747</li> <li class="task"><b class="delete">X</b> 5656</li> </ul> <!-- This button is to dynamically add items to list for demonstration purposes and is not required as part of the solution to OP question --> <button class='add'>ADD</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

I tried running the code snippet which you attached.

1. when i just clicked on the span element 'X' click event is getting triggered
2. when i clicked on entire li element click event is not getting triggered because you have defined your click event only for span element Some Alternatives to trigger click event using ID:

$("#id").click(function(){
 alert('working');
})