代码之家 › 专栏 › 技术社区 › Steven

jQuery与ready或load事件一起活动

jquery-tools jquery dom

Steven · 技术社区 · 14 年前

我使用的是jQuery工具提示插件,它是用 $('selector').tooltip() .tooltipper 元素。我认为以下方法可行:

$('.tooltipper').live('ready', function(){
  $(this).tooltip()
}

但它没有成功——准备就绪的事件没有发生。负荷也一样。我已经读到livequery可以产生我想要的结果,但是肯定有一种方法可以使用jQuery .live() 为了实现它,考虑到文档中说它适用于所有jQuery事件,我相信这一点 ready 是一个。

3 回复 | 直到 14 年前

Community Paul Sweatte 4 年前

引用自jqapi( http://api.jquery.com/live/

在jQuery 1.3.x中,只有以下JavaScript事件(除了自定义事件)可以与.live()绑定:click、dblclick、keydown、keypress、keyup、mousedown、mousemove、mouseout、mouseover和mouseup。

从jQuery1.4开始,.live()方法支持自定义事件以及所有JavaScript事件。

从jquery1.4.1开始,甚至focus和blur都可以使用live(映射到更合适的bubbling、events focusin和focusout)。

.live() 似乎不支持就绪事件。

Sean Vieira 14 年前

再加上HurnsMobile出色的回答;看着 bindReady() ,这是jQuery每次调用时为绑定到文档加载事件而进行的内部调用 $(some_function) 或 $(document).ready(some_function) 我们明白为什么我们不能与 "ready" :

bindReady: function() {
        if ( readyBound ) {
            return;
        }

        readyBound = true;

        // Catch cases where $(document).ready() is called after the
        // browser event has already occurred.
        if ( document.readyState === "complete" ) {
            return jQuery.ready();
        }

        // Mozilla, Opera and webkit nightlies currently support this event
        if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", jQuery.ready, false );

        // If IE event model is used
        } else if ( document.attachEvent ) {
            // ensure firing before onload,
            // maybe late but safe also for iframes
            document.attachEvent("onreadystatechange", DOMContentLoaded);

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", jQuery.ready );

            // If IE and not a frame
            // continually check to see if the document is ready
            var toplevel = false;

            try {
                toplevel = window.frameElement == null;
            } catch(e) { //and silently drop any errors 
                    }
                    // If the document supports the scroll check and we're not in a frame:    
            if ( document.documentElement.doScroll && toplevel ) {
                doScrollCheck();
            }
        }
    }

总而言之, 调用绑定到的函数:

onreadystatechange(DOMContentLoaded)

你最好的办法就是坚持那些可能创造 .tooltipper 元素,而不是尝试侦听就绪事件(只发生一次)。

Lars Corneliussen 13 年前

HurnsMobile是对的。JQuery live不支持ready事件。

这就是为什么我创建了一个结合两者的插件。您注册一次回调,然后需要为手动添加的内容调用一次插件。

$.liveReady('.tooltipper', function(){
  this.tooltip()
});

然后在创建新内容时:

element.html(somehtml);
element.liveReady();

或

$('<div class="tooltipper">...').appendTo($('body')).liveReady();

此处提供演示: http://cdn.bitbucket.org/larscorneliussen/jquery.liveready/downloads/demo.html

http://startbigthinksmall.wordpress.com/2011/04/20/announcing-jquery-live-ready-1-0-release/

还可以看看 http://docs.jquery.com/Plugins/livequery ,它将列出dom上的更改。