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

Question

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

我明白这是因为 'ready' 看不到新添加的元素。 P.S。在 page:change、page:update 上也不起作用。我该如何解决？

Answer 1

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

试试这个：

$( "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/

Answer 2

有两种方法可以解决这个问题。 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);

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

Jquery event not triggering on manually added elments

javascript

jquery

ruby-on-rails

coffeescript