7

.this_button我试图在动态加载的元素 () 上运行一个函数。我使用以下代码:

$(function(){
    $("body").on("load", ".this_button", function() {
         console.log("its been loaded");
    });
});

我试过delegate了,但它说它已被弃用on。某些元素可能会被推送,例如在文档已加载 10 分钟之后。它如何不断地检查一个元素.this_button是否进入了身体?

任何人都知道为什么这不起作用?

4

2 回答 2

11

文档中:

“在所有浏览器中,加载、滚动和错误事件(例如,在元素上)不会冒泡。[...] 此类事件不支持与委托一起使用,但它们可以在事件处理程序直接使用时使用附加到生成事件的元素上。”

于 2012-08-09T14:31:18.703 回答
11

on方法将在第一次执行时处理当前选定元素的事件或引发与特定选择器匹配的特定事件的任何未来元素。由于添加到页面的元素不会自动引发load或其他类型的事件,因此您的代码将永远不会为新添加的元素执行。

你有两个选择。第一个是在插入新元素时触发自定义事件。例如,

$.get("/newElemnet", function(newElement) {
   $('#placeToInsertElement').append(newElement);
   $(newElement).trigger('newElementAdded');
});

然后您的原始函数将侦听该自定义事件:

$(function(){
    $("body").on("newElementAdded", ".this_button", function() {
         console.log("its been loaded");
    });
}); 

第二种选择是不断轮询此问题中描述的新元素。

于 2012-08-09T15:09:04.370 回答