Question

我正在写一个jQuery插件，就像这样开始：

$.fn.kewTip = (function() {
    var $kewtip = $('<div></div>').css({'position':'absolute','zIndex':2147483647}).attr({'class':'kewtip'}).hide().appendTo('body');

你会注意到它会立即向页面主体附加一个元素，但是在DOM准备就绪之前它不能这样做，这意味着在DOM准备就绪之前无法定义插件。

但是，如果他们尝试在$('xxx').kewTip()之外调用它，我理想情况下会调用$(document).ready({ ... })。那么我该如何解决这个问题？

我的插件依赖于现有元素，所以如何在DOM准备好之前定义它？

Answer 1

如果您想要做的就是确保在第一次调用插件方法时存在div，那么只需创建它即可。为了使用元素（追加元素，事件处理程序），它不必添加到DOM中。

然后，独立地，在加载DOM时将元素添加到body。

例如：

$.fn.kewTip = (function() {
    // create element
    var $kewtip = $('<div />', {
        'class': 'kewtip',
        'style': 'position:absolute;zIndex:2147483647;display:none'
     });

    // add to DOM once it is ready
    $(function() {
        $kewtip.appendTo('body');
    });

    return function() {
        // here you can do whatever with `$kewtip` no matter whether it was 
        // already appended to body or not
    }
}());

（我假设你有一个自我调用函数）

Answer 2

根据Joy的建议，我想出了这个：

$.fn.kewTip = (function() {
    var $kewtip = $();
    $(function() {
        $kewtip = $('<div></div>').css({'position':'absolute','zIndex':2147483647}).hide().appendTo('body');
    });

$()只提供一个an empty jQuery object，因此其余的代码在准备就绪之前不会发生灾难性的失败。

如何设计一个依赖于已加载页面的jQuery插件？

2 个答案: