应用程序.js放置 - Rails 3 & jQuery

Question

在我的第一个Rails(3)项目中，我第一次涉猎jQuery。当我的application.js include在header中时，我遇到了麻烦，无法获得select语句的onChange来触发。

这是我当前的设置:

头包括:

<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" %>
<%= javascript_include_tag 'rails' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tag %>    

application.js

jQuery('#location_country_code').change(function() {
    alert('hi');
});     

我的问题是，我只能得到onChange函数火，如果我把application.js包括在页面的底部(即:选择元素之后)。把它放在标题中似乎意味着事件处理程序没有设置，因为元素还没有定义。

关于这类事情的所有教程都在谈论将js代码放在application.js中，所以我假设我错过了一些基本的东西。

提前感谢您的帮助/建议

Answer 1

你应该把你的jQuery封装在一个"document ready"块中:

jQuery(document).ready(function() {
    jQuery('#location_country_code').change(function() {
        alert('hi');
    }); 
});

相当于:

$( function() {
    jQuery('#location_country_code').change(function() {
        alert('hi');
    }); 
});

在分配处理程序之前等待加载文档。否则，选择还不存在，处理程序也未应用。

或者，您可以使用live调用来代替:

 jQuery('#location_country_code').live('change', function() {
     alert('hi');
 }); 

live函数将处理程序应用于窗口，并在事件从选择中弹出时处理该事件。因此，在应用select元素之前，它不需要存在。当您动态创建元素，但希望在创建元素时应用现有处理程序时，这很有帮助。因此，这解决了在页面完全加载之前元素不存在的问题。

然而，在任何情况下，将代码包装在一个"ready"块中是一个很好的实践，以避免不必要的副作用。

Answer 2

这是因为当元素存在于DOM中时需要调用代码。把它改成这样，它应该可以工作了:

jQuery(document).ready(function() {
  jQuery('#location_country_code').change(function() {
    alert('hi');
  }); 
});

文档。Ready在页面上加载了所有HTML和javascript文件之后调用。这也是在图像被调用之前。除了$(document).ready(function(){});，您还可以使用快捷方式$(function() {});