jQuery 使用 ready 或 load 事件答案

【问题标题】：jQuery live with the ready or load eventjQuery 使用 ready 或 load 事件
【发布时间】：2010-07-07 15:41:31
【问题描述】：

我正在使用 jQuery Tools 工具提示插件，该插件使用 $('selector').tooltip() 初始化。我想在任何当前或未来的.tooltipper 元素上调用它。我认为以下方法可行：

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

但它没有成功——ready 事件没有触发。负载也一样。我读过 livequery 可以产生我正在寻找的结果，但肯定有一种方法可以使用 jQuery .live() 来实现它，考虑到文档说它适用于所有 jQuery 事件，我相信ready 是一个。

【问题讨论】：

如果元素已经存在，为什么要使用.live()？我认为您最好尝试将其绑定到可能创建新selector 的事件。不是直接的答案，但在ready 上使用.live() 似乎是一种霰弹枪方法。只是我的 0.02 美元。
我是这样想的。某些元素应始终表现出某些行为。例如，具有href 属性的链接在单击时应始终将您带到一个 URL。大多数具有title 属性的元素应该在鼠标悬停时将参数显示为工具提示。只有对我来说，将这种功能用于高阶行为才有意义，例如自定义工具提示。
我最终只使用了$('.tooltipper').livequery(function(){$(this).tooltip()})，这对我来说最符合语义（与下一个最佳解决方案相反，即向创建工具提示元素的函数添加回调）工具提示行为与元素相关联——它与创建它的过程无关。
Steven - 所有帐户的有效积分。 +1 提供全面的信息性问题和答案。

标签： dom jquery jquery-tools

【解决方案1】：

引用自 jQ API (http://api.jquery.com/live/)：

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

从 jQuery 1.4 开始，.live() 方法支持自定义事件以及所有 JavaScript 事件。

从 jQuery 1.4.1 开始，甚至可以使用 live 进行焦点和模糊工作（映射到更合适的、冒泡、事件 focusin 和 focusout）。

从 jQuery 1.4.1 开始，可以指定悬停事件（映射到“mouseenter mouseleave”）。

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

【讨论】：

【解决方案2】：

添加到 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();
            }
        }
    }

总结起来，$(some_function) 调用了一个绑定到的函数：

DOMContentLoaded
onreadystatechange (DOMContentLoaded)
window.load / onload

最好的办法是绑定到那些可能创建新的.tooltipper 元素的操作，而不是尝试侦听就绪事件（这只发生一次）。

【讨论】：

太棒了！感谢肖恩提供更多详细信息！
感谢您深思熟虑的回答。我以前以您的方式将 jQuery 工具调用绑定到“构造函数”，但是这条查询线的想法是尽量避免完全这样做。我的理由是，工具提示的工具提示性与正在构建的工具提示无关，而是工具提示本身固有的。

【解决方案3】：

HurnsMobile 是对的。 JQuery live 不支持 ready-event。

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

$.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 的变化。

【讨论】：