javascript - 当 DOM 动态变化时，如何处理附加 `data-*` 属性的 JavaScript 事件？

Question

我正在使用 Ruby on Rails 4，我想处理 data-* 的链接当某些 HTML 元素动态添加到 DOM 时，以正确的方式添加属性。也就是说，在我的 View 文件中，我有以下内容:

<div id="css_id">
  <%= link_to("Title 1", link_path, :remote => true, "data-custom-target" => "css_id"}) %>
</div>

在我的application.js我有的文件:

$(function() {
  $('a[data-custom-target]').on('ajax:success', function(xhr, data, status) {
    css_selector = $(this).data('custom-target');
    target = $("#" + css_selector);

    target.replaceWith(data);
  });
});

当我单击上面的链接时(AJAX 响应成功)容器 div替换为以下呈现的代码:

<div id="css_id">
  <%= link_to("Title 2", link_path, :remote => true, "data-custom-target" => "css_id"}) %>
</div>

如您所见，新呈现的代码包含类似的链接元素 data-custom-target属性集。但是，如果我重新单击该链接，则 application.js似乎没有与第一种情况一样有效:它似乎没有“绑定(bind)” $('a[data-custom-target]').on('ajax:success', ...)到新呈现的链接。

有什么问题吗？我该如何解决这个问题？您有什么建议？

Answer 1

为此使用事件委托(delegate)，这将帮助您将事件绑定(bind)到 future 的元素。

$(function() {
  $(document).on('ajax:success',"a[data-custom-target]", function(xhr, data, status) {
    css_selector = $(this).data('custom-target');
    target = $("#" + css_selector);

    target.replaceWith(data);
  });
});