onLoad of new element,delegate/on？

Question

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

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

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

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

Answer 1

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

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

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

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

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

第二种选择是不断轮询这个问题中描述的新元素.

Answer 2

从文档:

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