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 plugin，这就是这个。最近的live函数类似，只是在添加元素时不会调用您。我们一直使用它 - 效果很好。

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

Answer 2

我不知道有这种类型的事件，我想到的是基于this教程创建事件“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直到选择器获得结果，并在结果可用时终止循环

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

7 个答案: