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");
    });
}); 

第二个选项是不断轮询新元素，如question中所述。

Answer 2

来自documentation：

“在所有浏览器中，加载，滚动和错误事件（例如，在元素上）不会冒泡。[...]这些事件不支持与委托一起使用，但它们可以在事件中使用handler直接附加到生成事件的元素。“