Привязка обработчика событий к глубоко вложенному сгенерированному div

Question

Привязка обработчика событий к глубоко вложенному сгенерированному div

0

Я относительно новичок в 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. Однако существует ли более простой способ достичь этого, используя только одну цепочку вызовов методов, как я намеревался сделать выше?

csvan 01 дек. 2013, в 00:37

Источник

Теги:

jquery

2 ответа

Ещё вопросы

Ryan Nigro · Answer 1 · 2013-11-30T21-10-00.000Z

Пытаться:

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

У меня, к сожалению, не работает - теперь слушателя вообще нет (проверил это и с помощью инструментов Chrome dev).

Renato Zannon · Answer 2 · 2013-11-30T20-50-00.000Z

При вызове jQuery.on вы можете указать селектор в качестве второго аргумента. Вы можете добавить некоторый отличительный атрибут/класс к вашей кнопке добавления, например:

<a data-add-button class="btn btn-primary btn-xs">Add</a>

Затем используйте это при привязке слушателя:

.on("click", "[data-add-button]", function() {
   // ...
});