Jquery динамический элемент селектор

Question

Я знаю, что этот вопрос был дан ответ много, но когда я применил это решение Event binding on dynamically created elements? селектор выбирает все элементы и извлекается только первый элемент

$('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 является родительским элементом a.delete
этот код скрывает все элементы с классом .foo и удалить первый элемент с классом a.delete а не щелкнул один

Как я могу получить идентификатор элемента я щелкнул и скрыть его родителей?

Answer 1

Вы должны использовать this вместо a.delete в событии click для получения справки нажатого a.delete, как показано ниже.

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

Answer 2

Использование this получить clicked элемент.

С docs, В дополнение к объекту события, функция обработки событий также имеет доступ к элементу DOM, что обработчик был связан с помощью ключевого слова this

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