Я относительно новичок в JQuery.
Моим вариантом использования является следующее: я извлекаю массив объектов JSON, а затем хочу создать из них список элементов загрузочного носителя. Каждому элементу я хочу связать кнопку "добавить", которая приведет к некоторой логике для генерируемого пользователя.
Мой код выглядит так:
$.each(result, function(index, user) {
resultContainer
.append(
'<div class="media">' +
'<a class="pull-left" href=' + Routing.generate('show_profile', { user_id: user.id }) + '>' +
'<img src=/uploads/images/' + user.picture + ' ' + 'height="32px" width="32px" />' +
'</a>' +
'<div class="media-body">' +
'<h4 class="media-heading">' + user.firstname + ' ' + user.lastname + '</h4>' + user.description
)
.append(
'<div class="btn-group pull-right">' +
'<a class="btn btn-primary btn-xs">Add</a>' +
'</div>'
).on('click', function(){
alert(index);
alert(user);
})
.append(
'</div>' +
'</div>'
);
});
Проблема заключается в том, что слушатель, похоже, связан с верхним элементом DOM (resultContainer), поэтому все слушатели отвечают, как только я нажимаю на что-либо.
Я понимаю, что я мог бы решить эту проблему, создавая каждый элемент DOM сам по себе, подключая слушателей, где это необходимо, и затем вставляя их друг в друга с помощью JQuery. Однако существует ли более простой способ достичь этого, используя только одну цепочку вызовов методов, как я намеревался сделать выше?
Пытаться:
$.each(result, function(index, user) {
resultContainer
.append(
'<div class="media">' +
'<a class="pull-left" href=' + Routing.generate('show_profile', { user_id: user.id }) + '>' +
'<img src=/uploads/images/' + user.picture + ' ' + 'height="32px" width="32px" />' +
'</a>' +
'<div class="media-body">' +
'<h4 class="media-heading">' + user.firstname + ' ' + user.lastname + '</h4>' + user.description
)
.append(
'<div class="btn-group pull-right">' +
'<a class="btn btn-primary btn-xs">Add</a>' +
'</div>'
)
.append(
'</div>' +
'</div>'
).filter('.btn')
.on('click', function(){
alert(index);
alert(user);
});
});
При вызове jQuery.on
вы можете указать селектор в качестве второго аргумента. Вы можете добавить некоторый отличительный атрибут/класс к вашей кнопке добавления, например:
<a data-add-button class="btn btn-primary btn-xs">Add</a>
Затем используйте это при привязке слушателя:
.on("click", "[data-add-button]", function() {
// ...
});