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());
    });
});

当对象＃street2不存在时，JS代码在第一次加载时加载了其他脚本。因此它没有用。

我尝试在执行Ajax后直接以不同方式加载脚本，但没有成功。 你能建议我如何使用jQuery处理新对象吗？

提前致谢

Answer 1

您是否尝试过事件委派（“为现在和将来与当前选择器匹配的所有元素附加事件处理程序”）？

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

使用事件委托：http://jsfiddle.net/8HHTM/

没有（就像您当前的代码）：http://jsfiddle.net/8HHTM/1/

Answer 2

当dom准备就绪时，jQuery将焦点事件绑定到与选择器'#street'匹配的所有元素。但是，当dom准备就绪时，ajax调用尚未完成，因此没有与您的选择器匹配的元素。

要确保事件绑定到选择器的所有实例（也是未添加到DOM的未来实例），请使用on()函数：

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

小提琴：http://jsfiddle.net/FkhHD/