1

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

4

2 回答 2

4

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

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

例如：

$.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
    }
}());

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

于 2012-06-20T16:26:14.607 回答
0

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

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

$()只是给出一个空的 jQuery 对象，所以其余的代码在它准备好之前不会发生灾难性的失败。

于 2012-06-20T16:25:54.063 回答