CODEWITHSUNDEEP
javascriptjquery
Moshiur Rahman
Moshiur Rahman

Reputation: 1642

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

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.

Upvotes: 1

Views: 232

Answers (3)

Nawed Khan
Nawed Khan

Reputation: 4401

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");
});

Upvotes: 1

Ritu
Ritu

Reputation: 732

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');
})

Upvotes: 0

zer00ne
zer00ne

Reputation: 43880

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>

Upvotes: 1

Related Questions