javascript - 使用 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 将会更改为您取消关注的第一个用户。如果其他用户当前正在使用以下按钮，您将无法再次关注。

<小时/>

这是我的关系 Controller 和我的 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

我认为您不应该在代码中的此时绑定(bind) ajax:success 事件。

将事件与函数绑定(bind)到元素意味着，从那时起，元素将监视该事件，并在事件发生时通过运行该函数来对其使用react。这意味着绑定(bind)应该在第一个事件的预期时间之前完成。

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

我这样做的方法是不进行绑定(bind)，而是在页面上的元素标识符中使用墙 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 代码与此处完全一样，没有包含在绑定(bind)函数中。

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