Как манипулировать контентом, загруженным в ajax?

Question

Я загружаю внешнюю страницу через jquery.ajax:

$("#mydiv").load("filter.html");

содержимое файла example.html:

<div id="filterdiv"><input id="filter" name="filter" size="40"/></div>

тогда я хочу манипулировать фильтром ввода #, поэтому я написал в javascript:

$('#filterdiv input').focus(function(){
    alert(Hello);
}

и ничего не происходит. Если я вставляю код filter.html прямо на страницу, он работает, но когда я вызываю его через ajax,

$('#filterdiv input').focus(function(){
    alert(Hello);
}

не видит загруженный ajax контент. Почему я делаю неправильно? Как я могу манипулировать загруженным ajax html?

Answer 1

Вам нужно добавить обработчик событий после загрузки HTML. Также обратите внимание, что я процитировал параметр alert (не уверен, что это действительно проблема или опечатка в вашем вопросе).

$("#mydiv").load("filter.html", null, function() {
   $("#filterDiv input").focus( function() {
      alert('Hello');
   });
});

Если бы вы использовали одно из событий, которые могли быть обработаны методом live , вы могли бы использовать это для настройки вашего обработчика один раз на весь срок жизни страницы. К сожалению, фокус-событие не относится к числу таких.

Добавлено в jQuery 1.3: привязывает обработчик на событие (например, нажмите) для всех нынешний и будущий элемент. Может также связывать пользовательские события.

Возможные значения события: нажмите, dblclick, mousedown, mouseup, MouseMove, Mouseover, Mouseout, keydown, нажатие клавиши, keyup

В настоящее время не поддерживается: размытие, фокусировка, mouseenter, mouseleave, изменить, отправить

Answer 2

Вам необходимо применить действие «после» загрузки страницы AJAX. Что может означать добавление его в конец страницы AJAX. Или на функцию обратного вызова.

$("#mydiv").load("filter.html", null, function(){ $('#filterdiv input').focus(function(){
    alert("Hello");
} });

В отличие от страниц программирования на стороне сервера, даже если страница в данный момент загружается, браузер продолжит выполнение следующей строки кода. Если вы связываете что-то (например, щелчок) в следующей строке, возможно, страница не загружена, поэтому она не будет привязана.

Функция обратного вызова, с другой стороны, выполняется только тогда, когда страница AJAX действительно загружена.