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>

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

1 个答案: