Question

我有一个用户页面，用户可以在其中列出他的关注者和他关注的用户。如果他点击一个按钮，它会显示关注者。如果他点击另一个按钮，它会显示他跟随的用户。

我不明白jquery事件第二次触发而不是第一次触发。我在show.html.erb中设置了用户“关注”列表。这是匹配的show.js.erb：

$(function(){
    $("#trusts_list_button").click(function(){
        $("#relationship_list").html("<%= escape_javascript(render 'follows') %>");
    });
    $("#trusted_list_button").click(function(){
        $("#relationship_list").html("<%= escape_javascript(render 'followers') %>");
    });
});

以下是展示视图：

<%= @user.name %>
<%= link_to "Add friends", facebook_friends_user_path %>

<table><tr><td>
<%= link_to "Trusts", "#follows", :id => "trusts_list_button", :remote => true%></td>
<td><%= link_to "Trusted by", "#followers" , :id => "trusted_list_button", :remote => true %></td></tr></table>
<div id = "relationship_list"><%= render 'follows' %></div>

首次点击后，两个按钮都能完美运行。但第一次初步点击确实让我失望。我会感激任何帮助;这不是我第一次遇到JQuery问题而且我真的对修复这类简单问题感到茫然。

Answer 1

第一件事.. ID应该始终是唯一的..你有两个具有相同id的元素..所以chnage

...
<%= link_to "Trusts", "#follows", :id => "trusts_list_follows_button", :remote => true%></td>
<td><%= link_to "Trusted by", "#followers" , :id => "trusted_list_followers_button", :remote => true %>
....

然后为每个按钮调用您的点击事件

$(function(){
  $("#trusts_list_follows_button").click(function(){
    $("#relationship_list").html("<%= escape_javascript(render 'follows') %>");
  });
  $("#trusted_list_followers_button").click(function(){
    $("#relationship_list").html("<%= escape_javascript(render 'followers') %>");
  });
});

您的代码中存在的问题是，点击事件是针对相同的按钮..因为您的选择器是$("#trusted_list_button")。这样就选择了id=trusted_list_button按钮，在你的情况下，这两个按钮都是按钮..所以点击事件只针对第二个按钮触发......

Answer 2

快速解决这个问题：

$(function(){
    $("#trusts_list_button").click(function(){
        $("#relationship_list").html("<%= escape_javascript(render 'follows') %>");
    }).click();
    $("#trusted_list_button").click(function(){
        $("#relationship_list").html("<%= escape_javascript(render 'followers') %>");
    }).click();
});

当doc ready发生时，它会第一次点击。

Answer 3

我最近遇到了这个问题，我确定克隆元素上存在一个事件 - 但是我无法找到或删除该事件（虽然我知道它在那里）...点击1 - 没有，单击2 - 正常触发，单击3 - 触发两次（排序）

我的解决方案是再次克隆特定的违规元素并使用克隆（这次没有克隆事件）来替换原始元素。

$（EL）.replaceWith（$（EL）.clone（））;

jquery事件只在第二次点击时触发 - 为什么？

3 个答案: