jQuery - как получить доступ к объекту, отображаемому вызовом Ajax?

Question

Я контент загружается JQuery .load функция():

<input type="text" name="street2" id="street2" value="" class="text" /> 

У меня есть простой обработчик JQuery, чтобы добавить значение в теге ввода в фокусе:

jQuery(function($) { 
    $("#street2").focus(function(){ 
     $("#street2").val($("#address").val()); 
    }); 
}); 

код JS был загружен с другими скриптами при первой загрузке, когда объект # street2 не существовал. Поэтому это не сработало.

Я попытался загрузить сценарий различными способами непосредственно после того, как Ajax был выполнен, но без успеха. Не могли бы вы посоветовать мне, как обращаться с новыми объектами с помощью jQuery?

Заранее спасибо

Answer 1

Вы пробовали делегирование событий (​​«Attach обработчика события для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем»)?

$(document).on('focus', '#street2', function(){ 
    $('#street2').val($('#address').val()); 
}); 

С делегацией события: http://jsfiddle.net/8HHTM/

без (как ваш текущий код): http://jsfiddle.net/8HHTM/1/

Answer 2

JQuery связывает событие фокуса для всех элементов, которые соответствуют селектору «#street», когда дом готов , Однако, когда dom готов, вызов ajax еще не завершен, поэтому нет элементов, соответствующих вашему селектору.

Для того, чтобы убедиться, что событие связано со всеми экземплярами селектора (также будущие те, которые еще не добавлены в DOM), используйте on() функцию:

$(document).on(events, selector, data, handler); 

скрипку: http://jsfiddle.net/FkhHD/