Размещение Application.js - Rails 3 & jQuery

Question

Я впервые работаю с jQuery в моем первом проекте Rails (3). У меня возникают проблемы при запуске onChange оператора select, когда мой application.js include находится в заголовке.

Это моя текущая настройка:

Заголовок включает в себя:

<%= 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 внизу страницы (т.е. после элемента select). Похоже, что размещение его в заголовке означает, что обработчик событий не установлен, так как элемент еще не определен.

Все учебники по этому типу вещей рассказывают о размещении кода js в application.js, поэтому я предполагаю, что упускаю что-то фундаментальное.

Заранее благодарим за любую помощь / совет.

Answer 1

Вы должны инкапсулировать свой 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 не должен существовать до его применения. Это полезно, когда вы создаете элементы динамически, но хотите, чтобы существующие обработчики применялись к ним при их создании. В результате это устраняет проблему с элементами, не существовавшими до полной загрузки страницы.

Однако , это хорошая практика, чтобы в любом случае обернуть ваш код в «готовый» блок, чтобы избежать нежелательных побочных эффектов.

Answer 2

, потому что код должен вызываться, когда элемент существует в DOM. Измените это на это, и оно должно работать:

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

document.ready вызывается после того, как все html и javascript файлы загружаются на страницу. Это также до того, как изображения называются. Вместо $ (document) .ready (function () {}); вы также можете использовать ярлык $ (function () {});