2012-08-09 44 views
7

我试图运行一个正在动态加载的元素(.this_button)的函数。即时通讯使用下面的代码:onLoad新元素,代表/ on?

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

我试过delegate,但它说赞成on其被弃用。在文件已经加载10分钟后,可能会推送一些内容。它如何持续检查一个元素.this_button是否已经进入正文?

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

+0

它在哪里动态添加?你不能只在这里添加这个功能吗? – 2012-08-09 14:16:15

+0

@rocky不,这个元素不能包含脚本。它是从数据库加载的,它会使事情复杂化 – 2012-08-09 14:17:12

+0

是}}:真的是你最后的结果?我认为应该是'});' – 2012-08-09 14:18:00

回答

9

documentation

“在所有的浏览器,所述负载,滚动和误差事件(例如,一个元件上)不冒泡[...]这样的事件不支持与授权使用。 ,但是当事件处理程序直接附加到生成事件的元素时,可以使用它们。“

+3

什么触发按钮被添加到页面?你能把它附在同一件事上吗? – 2012-08-09 14:33:34

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

第二个选择就是不断轮询在本question描述的新元素。