Application.js placement - Rails 3和jQuery

我在第一次Rails（3）項目中第一次涉足jQuery。當我的application.js包含在標題中時，我無法獲得select語句的onChange。Application.js placement - Rails 3和jQuery

這是我目前的設置：

標題包括：

<%= 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包含在頁面的底部（即：在本章後面） lect元素）。看起來，將它放在標題中意味着事件處理程序未設置，因爲該元素尚未定義。

關於這種類型的東西的所有教程討論把js代碼放在application.js中，所以我假設我錯過了一些基本的東西。

在此先感謝您的任何幫助/建議。

來源

2011-04-30 alan

你應該封裝你的jQuery在「文件準備好」塊：

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元素不需要存在。這在您動態創建元素時很有用，但希望現有處理程序在創建時應用它們。因此，這可以解決頁面完全加載之前不存在的元素的問題。

但是，在任何情況下將代碼封裝在「就緒」塊中以避免不必要的副作用是一種很好的做法。

來源

2011-04-30 00:27:27

感謝您的快速和詳細的答案。非常感激。 – alan 2011-04-30 03:13:19

它的原因是當元素存在於DOM中時需要調用代碼。將其更改爲此，它應該工作：

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

document.ready在頁面上加載所有html和javascript文件後調用。這也是在圖像被調用之前。您可以使用快捷方式$（function（）{}）;而不是$（document）.ready（function（）{}）;

來源

2011-04-30 00:27:14 agmcleod

感謝您的快速回答。我會去做一些jQuery教程:)對不起，必須將接受的答案切換到Jeff。起初沒有看到他的答案。我會投票給你。 – alan 2011-04-30 03:08:08

Application.js placement - Rails 3和jQuery

回答

相關問題