Jquery 事件未在手动添加的元素上触发答案

【问题标题】：Jquery event not triggering on manually added elmentsJquery 事件未在手动添加的元素上触发
【发布时间】：2015-02-24 16:35:53
【问题描述】：

页面进行 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'

我明白这是因为“准备好”没有看到新添加的元素。附言在 page:change、page:update 上，它也不起作用。我该如何解决？

【问题讨论】：

您是在手动添加新 div 之后还是之前设置监听器？如果你总是添加 div 并在它应该工作之后立即设置监听器。
我在AJAX解析功能后添加。

标签： javascript jquery ruby-on-rails coffeescript

【解决方案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);

【讨论】：

第二个建议是我认为的最佳选择。顺便说一句，如果我在第一个选项中使用this，它会代表触发元素（.appended）吗？ - 就像在第二个选项中一样？
我不确定，但应该是.existing_div。试试看，只需触发事件和console.log(this)

【解决方案2】：

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

试试这个：

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

或者，

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

在咖啡脚本中：

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

它应该工作。

阅读更多信息：http://learn.jquery.com/events/event-delegation/

【讨论】：