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

我正在写一个像这样开始的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准备就绪之前定义它？

最佳答案

如果您要做的只是确保在第一次调用plugin方法时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
    }
}());

（我假设您在那里具有自调用功能）