Javascript 使用HTML5“data-*”属性绑定链接时出现问题

我使用的是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);
      });
    }
  });
});

正如您所看到的，响应/返回的链接几乎与原始链接相同，也就是说，它具有与原始单击链接类似的data-*属性，因此即使在该链接替换DOM之后，JavaScript绑定也应该发生

但是，如果我继续单击其他链接（如标题2），则前端内容上的标题1和标题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>

<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绑定似乎没有像预期的那样工作。我不明白为什么会发生这种情况，但预期的行为是每次单击链接时只替换一个链接

---

有什么问题？如何解决这个问题？

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>

---

我尝试了你的代码，它生成了与问题中描述的完全相同的行为。我认为这个问题与绑定有关，因为它绑定用于替换所有链接，而不仅仅是一个链接。当你说你应该只将事件附加到使用它的对象时，你可能是正确的。你能添加代码来展示你的AJAX功能是如何工作的吗？@awexfwex-是的，我可以添加代码，但我不知道是什么代码。您在编辑问题本身后删除的RubyonRails问题标签就在那里，因为link_to…，：remote=>true，：method=>：patch。。。在某个地方，您必须有一些Javascript代码来执行实际的ajax调用。把它贴出来。ruby代码只是生成要使用的html，对于这个问题来说似乎没有必要。执行AJAX调用的代码在文件中的某个地方。好的，这很有意义。我完全错了。我会更新我的答案。

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