Jquery 对 future 元素不起作用？

Question

我有一个点击功能...

$('.rx').children().on('click',function(){alert('got here');});

我的 div(页面上有 50 个这样的 div 集)...

<div class="rx"><div id="'.$data_string.'" class="'.$button_image_class.'"><a  href="#" ></a></div></div>

(每个都是一个 css sprite 图像按钮，它将 id 中的 $data_string 发送到函数“process_me”。对于这个问题，我已将对 process_me 的调用替换为警报('got here'); 仅供引用。 $button_image_class 是可变的，因为特定图像的加载取决于成员(member)的帐户)

这一切都工作得很好，直到我使用分页来加载更多上述 div(另外 50 个，完全相同的 $data_string 条，无论如何，所有 div 中都不同)。

前 50 个 div 中的 Sprite 图像按钮链接按其应有的方式工作 - 单击它们会提示“到达这里”。但是，新加载的 div 集中的链接不起作用。

我首先猜测这是因为 DOM 没有拾取新元素，但是 .on('click',function()... 应该拾取 future 的元素。所以现在我认为这是

$('.rx').children().on('click',function(){alert('got here');});

我做错了。

那里有什么东西突出吗？

Answer 1

不，.on只会绑定(bind)到现有元素，除非您使用 delegated event .

选项#1

绑定(bind)到回调中新添加元素的 click 事件(在元素添加到 DOM 后):

$.ajax({
    ...
}).done(function(){
    $('.rx').children().on('click', function() { 
        alert('got here');
    });
});

选项#2

使用绑定(bind)到容器的委托(delegate)事件:

$(document).on('click', '.rx > *', function() { 
    alert('got here');
});

注意:您可能希望将选择器中的星号替换为与子项匹配的实际元素类型或类。应尽可能避免在选择器中使用星号。上述的另一个改进是使用更接近 .rx 的父级，而不是直接绑定(bind)到 document