Rails“ ajax：success”多次调用

Question

我正在创建一个模型来显示用户的关注者和关注者列表，就像Instagram：

我的控制器：

def create
    @relationship = current_user.active_relationships.new followed_id: @user.id
    if @relationship.save
      byebug
      respond_to :js
    else
      error_handle
    end
  end

“关注/取消关注”按钮是远程（ajax）形式。因此，在处理完之后，将其转到create.js.erb：

$(".relationship-form").on("ajax:success", function(e, data, status, xhr) {
    $(this).replaceWith(
        '<%= link_to "Unfollow", relationship_path(@relationship), method: :delete, data: {disable_with: "Loading ..."}, remote: true, class: "btn btn-outline-dark common-btn btn-unfollow relationship-form" %>'
    )
});

我的destroy.js.erb：

$(".relationship-form").on("ajax:success", function(e, data, status, xhr) {
    $(this).replaceWith(
        '<%= link_to "Follow", user_relationships_path(@other_user), method: :post, data: {disable_with: "Loading ..."}, remote: true, class: "btn btn-primary common-btn btn-follow relationship-form" %>'
    )
});

当我第一次单击跟随user A按钮时，它将运行1次。

问题在于，如果我再次在user B上单击“跟随”按钮，它将为最后一个user A运行js，然后为user B运行js（2次）。如果我遵循user C，它将返回user A，user B和user C，依此类推...

这是我的按钮形式：

<% if is_following.present? %>
    <%= link_to "Unfollow", relationship_path(is_following), method: :delete, data: {disable_with: "Loading ..."},
                remote: true, class: "btn btn-outline-dark common-btn btn-unfollow relationship-form" %>
<% else %>
    <%= link_to "Follow", user_relationships_path(user), method: :post, data: {disable_with: "Loading ..."},
                remote: true, class: "btn btn-primary common-btn btn-follow relationship-form" %>
<% end %>

如果我能获得“ clicked”元素，那就太好了，因为我想不出一种为每个关注和取消关注状态命名唯一ID的方法。

Answer 1

结果是我自己解决了。只是有点愚蠢和肮脏的方式。

因此，在完成控制器处理后，它将转到js.erb文件，并将结果打印到“ display：none” div中：

$("#relationship-result").html(
    '<%= link_to "Unfollow", relationship_path(@relationship), method: :delete, data: {disable_with: "Loading ..."}, remote: true, class: "btn btn-outline-dark common-btn btn-unfollow relationship-form" %>'
)

然后在application.js中，我们在所需的按钮上监听事件ajax:success。因此，通过这种方式，我们不会得到重复的事件侦听，谢谢@xploshioOn。然后获取数据并替换：

$(document).on("ajax:success", ".relationship-form", function(e, data, status, xhr) {
        $(this).replaceWith($("#relationship-result").html());
})

请注意，由于我在此处替换了某些DOM，因此我使用document。所以有点技巧和肮脏，但可以：v