绑定具有HTML5'data- *'属性的链接时出现问题

Question

我正在使用Ruby on Rails 4，并且具有以下代码：

# view.html.erb

link_to("Title 1", url1, :remote => true, :method => :patch, :data => {:type => :html, :custom => true}
# <a rel="nofollow" href="/url1" data-type="html" data-custom="true" data-remote="true" data-method="patch">Title 1</a>

link_to("Title 2", url2, :remote => true, :method => :patch, :data => {:type => :html, :custom => true}
# <a rel="nofollow" href="/url2" data-type="html" data-custom="true" data-remote="true" data-method="patch">Title 2</a>

link_to("Title 3", url3, :remote => true, :method => :patch, :data => {:type => :html, :custom => true}
# <a rel="nofollow" href="/url3" data-type="html" data-custom="true" data-remote="true" data-method="patch">Title 3</a>


# application.js

$(document).ready(function() {
  $('a[data-remote][data-custom]').bind({
    click: function(event) {
      $(document).on('ajax:success', function(xhr, data, status) {
        $(this).replaceWith(data);
      });
    }
  });
});

例如，如果单击Title 1的链接，则成功后，响应/返回的数据是以下链接（单击Title 2和Title 3链接时，行为相同）：

link_to("Replaced 1", url1, :remote => true, :method => :patch, :data => {:type => :html, :custom => true}
# <a rel="nofollow" href="/url1" data-type="html" data-custom="true" data-remote="true" data-method="patch">Replaced 1</a>

如您所见，响应/返回的链接与原始链接几乎相同（也就是说，它具有data-*属性，就像原始单击的链接一样），因此，即使替换了该链接，JavaScript绑定也应该发生DOM。

但是，如果我继续单击其他链接（如“ Title 2那么Title 1和Title 2链接都将替换在前端内容上，从而产生以下完整的HTML代码：

<a rel="nofollow" href="/url2" data-type="html" data-custom="true" data-remote="true" data-method="patch">Replaced 2</a>
<a rel="nofollow" href="/url2" data-type="html" data-custom="true" data-remote="true" data-method="patch">Replaced 2</a>
<a rel="nofollow" href="/url3" data-type="html" data-custom="true" data-remote="true" data-method="patch">Title 3</a>

为了完整起见，当我单击Title 3将产生以下完整的HTML代码：

<a rel="nofollow" href="/url3" data-type="html" data-custom="true" data-remote="true" data-method="patch">Replaced 3</a>
<a rel="nofollow" href="/url3" data-type="html" data-custom="true" data-remote="true" data-method="patch">Replaced 3</a>
<a rel="nofollow" href="/url3" data-type="html" data-custom="true" data-remote="true" data-method="patch">Replaced 3</a>

似乎JavaScript绑定无法正常工作（请注意重复的Replaced <N>链接）。 我不明白为什么会发生这种情况，但是预期的行为是每次单击该链接仅替换一个链接。

问题是什么？ 我该如何解决？

Answer 1

bind函数在调用时将事件处理程序附加到实际元素。 因此，当您重新创建链接时，它没有附加可单击的事件处理程序。 相反，您应该使用.on（..）或.delegate（..），并将事件处理程序本身附加到链接上方的包装器元素上。

相反，每次单击链接时，您都将创建一个新的Ajax成功处理程序，以便它们建立起来。 我不确定您的AJAX功能是如何实现的，但是您应该只将ajax：success事件附加到使用它的函数/对象上，或者将其仅附加到文档一次，在此您需要传递单击以启动请求的元素。

未经测试的示例代码：

<script type="text/javascript">
    $(document).ready(function () {
        $("#link-list").on('ajax:success', "a[data-remote][data-custom]", function(xhr, data, status) {
            $(this).replaceWith(data);
        });
    });
</script>
 <div id="link-list"> <!-- // wrapping element to attach event handlers to -->
    <a rel="nofollow" href="/url1" data-type="html" data-custom="true" data-remote="true" data-method="patch">Title 1</a>
    <a rel="nofollow" href="/url2" data-type="html" data-custom="true" data-remote="true" data-method="patch">Title 2</a>
    <a rel="nofollow" href="/url3" data-type="html" data-custom="true" data-remote="true" data-method="patch">Title 3</a>
</div>