6

我有一个点击功能...

$('.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”。对于这个问题，我已经用 alert('got here'); 替换了对 process_me 的调用。仅供参考 $button_image_class是可变的，因为特定图像的加载取决于会员的帐户）

一切都很顺利，直到我使用分页加载更多上述 div（另外 50 个，完全相同的栏 $data_string，无论如何在所有 div 中都不同）。

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

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

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

我做错了。

有什么突出的地方吗？

4

3 回答 3

9

不，.on只会绑定到现有元素，除非您使用委托事件。

选项1

click在回调中为新添加的元素绑定到事件（在元素被添加到 DOM 之后）：

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

选项 #2

使用绑定到容器的委托事件：

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

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

于 2012-11-26T14:50:14.633 回答
3

on() 不是 live() 的别名。它说“将这个未来事件绑定到我指定的元素上我指定的现在存在的这些孩子”

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

但如果它<div class="rx...>是动态创建的整体而不是其中的元素

$(document).on('click', '.rx > *', function(){alert('got here');});
于 2012-11-26T14:50:05.043 回答
0

您需要使用委托事件。简而言之，您需要为 jquery 指定一个容器元素来“监视”对 DOM 的更改，这意味着 on() 函数的语法略有不同：

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

这意味着它将观察主体（您应该在现实中使用更具体的元素），并找到任何具有“rx”类的元素。现在，当 body 有由 javascript 动态插入的新元素时，它们也会被提醒。

在此处查看jQuery 文档以获取完整的详细信息。

于 2012-11-26T14:50:19.017 回答