Jquery dynamic element selector

Question

I know this question has been answered a lot, but when I applied this solution Event binding on dynamically created elements? the selector selects all the elements and retrieved only the first element

$('body').on('click','a.delete',function() {
   var id = $('a.delete').attr('id');
   var par = $('a.delete').closest('.foo');
   console.log(id);
   par.hide();
   postDelete(id);
});

.foo is a parent element of a.delete
this code hides all elements with class .foo and delete the first element with class a.delete not the clicked one

How can I retrieve the ID of the element I clicked and hide its parent?

score 0 · Answer 1 · answered Apr 07 '16 at 18:33

You should use this instead of a.delete in click event to get the reference of clicked a.delete like following.

$('body').on('click', 'a.delete', function () {
    var id = $(this).attr('id'); //change here
    var par = $(this).closest('.foo'); //change here
    console.log(id);
    par.hide();
    postDelete(id);
})

score 0 · Answer 2 · answered Apr 07 '16 at 18:34

Use this to get the clicked element.

From the docs, In addition to the event object, the event handling function also has access to the DOM element that the handler was bound to via the keyword this

$('body').on('click', 'a.delete', function() {
  var id = $(this).attr('id');
  var par = $(this).closest('.foo');
  console.log(id);
  par.hide();
  postDelete(id);
});

Jquery dynamic element selector

2 Answers2