使用Ajax关闭或取消关注用户会导致其他链接的href发生变化吗？附图像/示例

Question

我会尝试尽可能地解释这种奇怪的情况。附上图像/示例

我有一个专门用于显示特定用户所关注的所有用户的页面。

users_controller.rb
def following
  @pals = current_user.following
end

following.html.erb
<% @pals.each do |pal| %>
  <div class="following-user-btn">
      <% if current_user_is_following(current_user.id, pal.wall.id) %>
          <%= link_to 'Following' , unfollow_wall_path(pal.wall.id), remote: true, method: :post, class: 'unfollow-button' %>
      <% else %>
          <%= link_to 'Follow' , follow_wall_path(pal.wall.id), remote: true, method: :post, class: 'btn follow-button' %>
      <% end %>
  </div>
<% end %>

当我加载页面时，一切都显示正常，相应的每个用户旁边的“关注”按钮，并且取消关注用户正常工作。但是，在单击取消关注按钮后，它会将其他用户的href更改为您取消关注的第一个用户。如果其他用户当前正在使用以下按钮，您将无法再次关注。

这是我的人际关系控制器和我的javascript

def follow_wall
 if current_user.follow @wall.id
  respond_to do |format|
    format.html { redirect_to root_url }
    format.js { render 'walls/follow_wall' }
  end
 end
end

def unfollow_wall
 if current_user.unfollow @wall.id
  respond_to do |format|
    format.html { redirect_to root_url }
    format.js { render 'walls/unfollow_wall' }
  end
 end
end

Unfollow_wall.js.erb
$('.unfollow-button').bind('ajax:success', function(){
    $(this).closest('.unfollow-button').hide();
    $(this).closest('.following-user-btn').html('<%= link_to 'Follow' , follow_wall_path(@wall.id), remote: true, method: :post, class: 'btn follow-button' %>');
});


Follow_wall.js.erb
$('.follow-button').bind('ajax:success', function(){
    $(this).closest('.follow-button').hide();
    $(this).closest('.following-user-btn').html('<%= link_to 'Following' , unfollow_wall_path(@wall.id), remote: true, method: :post, class: 'unfollow-button' %>');
});

我甚至尝试将其更改为：

$('#follow-button').attr('class', 'btn unfollow-button')
    .text('Following')
    .attr('href', "/<%= @wall.id %>/unfollow_wall")
    .attr('id', 'unfollow-button');

$('#unfollow-button').text('Follow')
    .attr('class', 'btn follow-button')
    .attr('href', "/<%= @wall.id %>/follow_wall")
    .attr('id', 'follow-button');

没有运气

请注意，重新加载后，href对所有用户都是正确的。

当我在中间取消关注用户时，一切都很好。

现在当我取消关注顶级用户时，顶级用户href会更改为中间用户？这是我真的感到困惑的地方？

过去几天我一直在努力......任何帮助都非常值得赞赏。谢谢！

Answer 1

我认为您不应该在代码中绑定ajax:success事件。

将带有函数的事件绑定到元素意味着，从那时起，元素将监视事件并通过在事件发生时运行该函数来对其做出反应。这意味着绑定应该在之前在第一个事件的预期时间之前完成。

然而，Rails将在unfollow_wall.js.erb中运行JS作为对单击按钮的响应 - 这不是将函数绑定到事件的时间，这是运行该函数的时间。

我这样做的方法是不进行绑定，而是在页面上的元素标识符中使用wall id，如下所示：

这里看到每个按钮的外部div的id

<%# following.html.erb %>
<% @pals.each do |pal| %>
  <div id="following-user-btn-<%= pal.wall.id %>">
      <% if current_user_is_following(current_user.id, pal.wall.id) %>
          <%= link_to 'Following' , unfollow_wall_path(pal.wall.id), remote: true, method: :post, class: 'unfollow-button' %>
      <% else %>
          <%= link_to 'Follow' , follow_wall_path(pal.wall.id), remote: true, method: :post, class: 'btn follow-button' %>
      <% end %>
  </div>
<% end %>

并在js中找到外部div中具有正确id的按钮

# unfollow_wall.js.erb
$('#following-user-btn-<%= @wall.id %>').find('.unfollow-button').hide();
$('#following-user-btn-<%= @wall.id %>').html('<%= link_to 'Follow' , follow_wall_path(@wall.id), remote: true, method: :post, class: 'btn follow-button' %>');

unfollow_wall.js.erb文件中的js代码与此处完全相同，未包含在绑定函数中。

当然，同样适用于其他js文件。