jQuery附加函数到元素的“加载”事件答案

【问题标题】：jQuery attach function to 'load' event of an elementjQuery附加函数到元素的“加载”事件
【发布时间】：2009-11-17 10:58:10
【问题描述】：

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

我尝试了以下方法，但没有成功：

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

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

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

【问题讨论】：

为什么不在添加元素后立即调用其他 jQuery 函数？
因为添加元素的不是我。

标签： javascript jquery javascript-events

【解决方案1】：

我想将一个函数附加到一个每当触发的jQuery元素元素被添加到页面中。

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

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

【讨论】：

【解决方案2】：

不知道有没有这种事件，想到的是根据this教程创建事件“el-load”，然后扩展“append”来知道item是否有这个事件make对它的调用。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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);

【讨论】：

该元素是通过第 3 方代码附加的。所以，拦截append这个方法对我没用。
谁是第三方，你能以类似的方式覆盖他们的追加方法吗？据我所知，加载事件仅在实际加载到另一个文件（例如 img、script 和 iframe）中的元素上触发。

【解决方案5】：

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

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

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

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

【讨论】：

我不明白#somenode 部分的用途。
#somenode 是你的选择器，参考 jQuery 文档：api.jquery.com/category/selectors

【解决方案6】：

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

【讨论】：

【解决方案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);

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

【讨论】：