jQuery附加函数来“加载”元素的事件

Question

我想将一个函数附加到jQuery元素，该元素在元素添加到页面时触发。

我试过以下，但它不起作用：

var el = jQuery('<h1>HI HI HI</H1>');   
el.one('load', function(e) {
  window.alert('loaded');
});    
jQuery('body').append(el);

我真正想要做的是保证另一个希望某个#id在页面上的jQuery函数不会失败，所以我想在页面中加载元素时调用该函数。

---

为了澄清，我将el元素传递给另一个库（在这种情况下它是一个电影播放器​​但它可能是其他任何东西）我想知道何时将el元素添加到页面中，无论它是我的电影播放器​​代码它正在添加元素或任何其他元素。

Answer 1

我想将一个函数附加到jQuery元素，该元素在元素添加到页面时触发。

你想要livequery插件 ，它就是这样做的。 最近的live函数类似，只是在添加元素时不会调用您。 我们一直使用它 - 效果很好。

你将使用$('h1').livequery(function() {alert('just added');});

Answer 2

我不知道有这种类型的事件，想到的是根据本教程创建事件“el-load”，然后扩展“append”以知道项目是否有此事件调用它。

Answer 3

在这种情况下，使用LiveQuery（jQuery插件），并将load事件附加到ur dom元素（h1）。

Answer 4

尝试覆盖append方法，以便添加自己的事件？

jQuery.extend(jQuery.fn, {
    _append: jQuery.fn.append,

    append: function(j) {
        this._append(j);
        j.trigger('append');
    }
});

var el = jQuery('<h1>HI HI HI</H1>');   
el.one('append', function(e) {
    window.alert('loaded');
});    
jQuery('body').append(el);

Answer 5

如果通过ajax创建标记，则可以使用相关节点订阅ajaxSuccess事件。

http://docs.jquery.com/Ajax/ajaxSuccess

$('#somenode').ajaxSuccess(function(){
     if ($('h1').length > 0) { ... }
});

如果它只是被本地脚本添加到DOM中，我不确定是否可以观察它的创建，除了使用计时器进行轮询。

Answer 6

根据您需要支持的浏览器，有DOMNodeInserted和DOMNodeInsertedIntoDocument事件。 不能保证他们自己的工作能力，但理论上你可以绑定到这些事件，然后检查新节点和插入的可能子树，或者只用你选择的$（选择器）再次检查整个文档。检测您正在等待添加的节点。

Answer 7

试试这些：

var el = jQuery('<h1>HI HI HI</H1>');    
jQuery('body').append(el);
setTimeout(function(){
    window.alert('loaded');
},1000);//delay execution about 1 second

或者为了这个安全：

var el = jQuery('<h1>HI HI HI</H1>');    
jQuery('body').append(el);
window.checker = setInterval(function(){
    if($('someselector').length>0){ //check if loaded
         window.alert('loaded');             
         clearInterval(window.checker);
    }    
},200);

基本上，这将循环每200ms直到选择器获得结果，并在结果可用时终止循环