jQuery将函数附加到元素的“load”事件

x4shl7ld  于 2022-12-22  发布在  jQuery
关注(0)|答案(7)|浏览(140)

我想将一个函数附加到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元素是何时添加到页面的,是我的电影播放器代码添加了该元素还是其他任何元素。

2q5ifsrm

2q5ifsrm1#

我想将一个函数附加到jQuery元素,只要将该元素添加到页面,该函数就会触发。
你需要livequery plugin,它就是这样做的,最近的live函数也是类似的,除了在添加元素时它不会调用你,我们一直在使用它--工作得很好。
您将使用$('h1').livequery(function() {alert('just added');});

yrdbyhpb

yrdbyhpb2#

我不知道有这种类型的事件,我想到的是基于this教程创建事件“el-load”,然后扩展“append”以了解项目是否有此事件对其进行调用。

d8tt03nd

d8tt03nd3#

在本例中,使用LiveQuery(jQuery插件),并将一个load事件附加到ur dom元素(h1)。

iszxjhcz

iszxjhcz4#

尝试覆盖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);
3df52oht

3df52oht5#

如果标记是通过 AJAX 创建的,则可以使用相关节点订阅ajaxSuccess事件。
http://docs.jquery.com/Ajax/ajaxSuccess

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

如果只是通过本地脚本将其添加到DOM中,我不确定是否可以观察到它的创建过程,除非使用计时器轮询它。

gdrx4gfi

gdrx4gfi6#

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

6tdlim6h

6tdlim6h7#

试试这些:

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循环一次,直到选择器获得结果,并在结果可用时终止循环

相关问题