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'）;对于这个问题.FYI $ button_image_class是可变的，因为根据成员的帐户加载特定图像）

这一切都很漂亮，直到我使用分页加载更多的上述div（另外50个，完全相同的bar $ data_string，这在所有div中都是不同的）。

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

我首先猜到这是因为DOM没有拿起新元素，但是.on（'click'，function（）...应该会选择未来的元素。所以现在我认为它是

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

我做错了。

那里有什么东西？

Answer 1

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

选项＃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

Answer 2

on（）不是live（）的别名。它说“将这个未来的事件绑定到这些我正在指定的元素，我现在指定的元素”

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

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

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

Answer 3

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

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

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

查看jQuery documentation here以获取完整详情。

Jquery对未来的元素不起作用？

3 个答案: