Jquery 脚本在不显眼时的行为与在 rails 视图中时的行为不同答案

【问题标题】：Jquery script behaving differently when unobtrusive than when inside the rails viewJquery 脚本在不显眼时的行为与在 rails 视图中时的行为不同
【发布时间】：2012-04-20 07:57:12
【问题描述】：

我有这个想法

<script type='text/javascript'>
$(function(){       
    $('#users').click(function(){
        alert($("tr[aria-selected=true] td:first").html())                      
    })
})
</script>

在我的 users.js 中

$(function(){       
    $('#users').click(function(){
        alert($("tr[aria-selected=true] td:first").html())                      
    })
})

拥有它们，显然不是同时，给了我不同的结果基本上我正在尝试检索所选行的 ID，找到它的 attr 值。\

在加载页面后，我会以一种不显眼的方式在我第一次点击一行时得到“null”，然后每次点击一行时都会显示我之前点击的值...TWICE！。但是当将脚本保留在我的视图中时，我得到了我想要的结果。

我做错了什么？

编辑：

我的看法

<%=raw jqgrid("List of users", "users", "/users", 
 [    
   { :field => "id", :label => "id",:width => 50 },    
   { :field => "username", :label => "username",:width => 120,:editable => true },    
   { :field => "email", :label => "email",:width => 120,:editable => true },    
   { :field => "name", :label => "name",:width => 100,:editable => true },    
   { :field => "lastname", :label => "lastname",:width => 100,:editable => true },
   { :field => "groups", :label => "roles",:width => 180}   
 ] , {:add => true,:edit => true,:delete => true,:error_handler => "s",:inline_edit => 'true',:edit_url => post_data_users_url,:sortable_rows => 'true'}  
 ) %>
 <p><%= link_to "Edit roles",roles_path%>
 <%= link_to "| Edit user",{:action => 'edit'},{:class => 'editLink hide'}%></p>

 <script type='text/javascript'>
   $(function(){
       var _last = new String()     
       $('#users').click(function(){
           _last = $("tr[aria-selected=true] td:first").html()
           $(".editLink").attr("href","/users/edit/"+ _last)
           $(".editLink").addClass('show')
       })
   })
</script>

我的布局

<!DOCTYPE html>
<html>
<head>
  <title>UserManager</title>
  <%= stylesheet_link_tag "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
  <%=jqgrid_javascripts%>
  <%=jqgrid_stylesheets%>
</head>
<body>
    <div>
        <%if flash[:notice]%>
            <p><%= flash[:notice]%></p>
        <%end%>
        <%if current_user%>
            Logged in as <%= current_user.username%> | <%= link_to 'logout', log_out_path%>
        <%end%>
    </div>
    <%= yield %>
 </body>
</html>

在我看来……没什么特别的

【问题讨论】：

当您使用 users.js 时，您在哪里包含对文件的引用？在头部还是在身体之后？不确定这是否真的很重要
是的，它已经加载了。如果我没记错的话，因为 rails 3.1 出来了所有相应的控制器名称都会加载 js 文件。仍然包含在我的布局中，但结果是一样的。跨度>
我想知道它是否与元素不是常规表格而是 jqgrid 有什么关系？我将尝试使用常规表格元素。
相同...工作方式不同

标签： jquery ruby-on-rails unobtrusive

【解决方案1】：

根据您的性能要求，使用 .live('click', function(){}) 而不是 click(function(){})，或者在 users.js 中创建一个函数来进行绑定和使用jqgrid 上的回调以运行它。

在 users.js 中

$(function(){       
    $('#users').live('click', function(){
        alert($("tr[aria-selected=true] td:first").html())                      
    })
})

或者在 users.js 中：

function bindClickToRow(){
   $(function(){       
     $('#users').click(function(){
        alert($("tr[aria-selected=true] td:first").html())                      
     })
   })
 }

然后在 jqgrid 的回调中使用它（我不知道他们的 API 是如何工作的，我无法快速找到，但我很确定一个好的网格插件支持这个，所以将其视为伪代码）：

jQuery('table').jqgrid({
  afterCreate: bindClickToRow
})

希望这会有所帮助。

据我所知，原因是您正在使用“点击”将点击事件绑定到一个函数。但是当实际本身还不存在时，您正在这样做。所以你基本上是在告诉 jQuery，在现在存在的所有 s 上绑定“点击”。

如果你使用 'live' 会发生什么，这相当于告诉 jQuery 将该函数绑定到与你的选择器匹配的所有 current AND future 上的一个 'click' 事件。

尚不存在的原因是因为显然 jqgrid 是在被调用的绑定之后加载的。此外，jqgrid 可能会在调用“click”绑定很久之后定期创建新的 s。如果你使用 'live'，jQuery 会留意所有新的 s，并在它们创建后立即将回调函数绑定到它们。

【讨论】：

我决定将脚本留在视图内部（尽管这不是一个好习惯）...我真正想知道的是我描述的问题的原因。谢谢帮助
@Daniel 我用解释更新了我的答案。希望它更清楚。