Question

我对JQuery比较陌生。

我的用例是这样的：我检索一个JSON对象数组，然后想要从这些对象创建一个bootstrap媒体元素列表。对于每个元素，我想关联一个“添加”按钮，这将导致生成该用户的一些逻辑。

我的代码如下所示：

              $.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将它们嵌套在一起来解决这个问题。但是，有没有一种更简单的方法来实现这一点，只使用一个方法调用链，就像我打算在上面做的那样？

Answer 1

尝试：

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

Answer 2

在对jQuery.on的调用中，您可以将选择器指定为第二个参数。您可能希望在添加按钮中添加一些可区分的属性/类，例如：

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

然后，在绑定侦听器时使用它：

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

将eventlistener绑定到深层嵌套生成的div

2 个答案: