Question

Page生成ajax调用，接收JSON，而不是将json数据添加到新元素，并将这些元素追加到页面：

$('.get_comments').on "ajax:complete", (e, data, status) ->
    json = data.responseJSON
      for obj in json
        $('.existing_div').append("<div class="APPENDED">#{obj.attr}</div>")

我手动添加了一些'on'列表器，但它们没有触发！

$('.APPENDED').on "click", ->
    console.log 'worked'

我明白这是因为“准备好了”并没有看到新添加的元素。附：在页面上：更改，页面：更新，它也不起作用。我该如何解决这个问题？

Answer 1

有两种方法可以解决问题。 1.更简单的方法活动代表团，您可以在此处阅读http://learn.jquery.com/events/event-delegation/

$('.existing_div').on('click', '. APPENDED', function(){
    // do something
});

2。在追加之前做这个

var elem = '<div class="APPENDED">#{obj.attr}</div>';
elem = $(elem);
elem.on('click', function(){
    // do something
});
$('.existing_div').append(elem);

Answer 2

将事件处理程序直接附加到元素将不适用于动态添加的元素。您应该将处理程序附加到父容器。

试试这个：

$( "body" ).on( "click", ".APPENDED", function() {
  console.log ('worked');
});

或者，

$(document).on("click", ".APPENDED", function() {
   console.log ('worked');
});

在coffeescript中：

$(document).on "click", ".APPENDED", ->
  console.log 'worked'

它应该工作。

详细了解：http://learn.jquery.com/events/event-delegation/

Jquery事件不会触发手动添加的元素

2 个答案: