javascript - Jquery 事件不会在手动添加的元素上触发

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>")

我有一些用于手动添加元素的“打开”监听器，但它们没有触发!

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

我确实明白这是因为“就绪”看不到新添加的元素。附:在页面:更改，页面:更新上，它也不起作用。我该如何解决这个问题？

Answer 1

有两种方法可以解决这个问题。1.更简单的方法事件委托(delegate)，您可以在这里阅读 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);