jQuery UI Widgets - 将 jQuery 对象存储在实例变量中

Question

我刚刚开始编写自己的插件，但是在将jQuery对象存储为实例变量时遇到了一些困难。我的意思是，例如，在下面的代码中：

$.widget("ns.slider", {
    options: {
        "selector": "li",
        "selected": 0,
        "delay": 1000
    },
    _create: function() {
        var slider= this;
        this.element.addClass("slider");
        this.container = $("<div class="slider-container"></div>");
        this.container.height($(this.element).height());
        $(this.element).wrap(this.container).css({
            "position": "absolute",
            "top": 0,
            "left": 0,
            "right": 0
        });
        this.container.css({"position": "relative", "overflow": "hidden", "backgroundColor": "#CCC"}); // Problem line
        this.container.remove(); // Also problem line
    }
}

我标记为问题行的两行似乎没有执行 - 或者更确切地说，它们执行了，但更改在页面上不可见。我希望看到背景颜色在第一行变成灰色，在第二行完全消失。似乎包装函数实际上复制了元素，并且在对原始元素进行更改时，复制的元素会保留旧属性。然而，我敢肯定我以前用过这个，几年前，它工作得很好。

我正在使用jQuery 1.8.3和jQuery UI 1.10.4。在任何人说之前，我知道已经有一个jQuery UI滑块 - 出于保密原因，我不得不重命名插件以解决此问题。

我在这里做错了什么？如果还有其他信息，请告诉我。提前谢谢。

Answer 1

jQuery的包装方法克隆元素。以下内容使用容器元素的克隆版本：

$(this.element).wrap(this.container) // `this.container` is cloned first

当您尝试在事后应用样式时，这些样式将应用于未附加到 DOM 的非克隆版本。

您可以通过在包装元素之前添加样式来解决此问题：

container.css({"position": "relative", "overflow": "hidden", "backgroundColor": "#CCC"});
$(this.element).wrap(this.container)

另请注意，调用 remove 不会删除任何内容，因为只有克隆的容器附加到 DOM。而是通过将其设置为 null 来清理它。

container = null;

下面是一个JSFiddle：http://jsfiddle.net/0db32Lzh/