Question

我有一个标记插件。

该插件正在通过ajax生成的表单元素上使用。

类似

...
success : function(data) {
   $.lightbox(data);
   $('#groups').tagit();
}
...

现在提交表单时（通过ajax），灯箱被移除，因此表格也是如此。

但是，

如果我点击按钮创建一个新表单，插件就处于以前的状态，即使#groups现在是一个全新的dom元素。

为什么会这样，我该如何解决？

（以我所说的相同状态）

我有一个变量是插件

_vars : {tags: []}

这会在添加标签时填充。当在新的#groups上再次调用插件时，tags变量包含来自前一个实例的所有标记。

我该如何解决这个问题？

<小时/> 的代码

$.widget("ui.tagit", {

    // default options
    options: {
        tagSource:   [],
        allowSpace:  true,
        initialTags: [],
        minLength:   1
    },

    //private variables
    _vars: {
        lastKey: null,
        element: null,
        input:   null,
        tags:    []
    },

    _keys: {
        backspace: 8,
        enter:     13,
        space:     32,
        comma:     44
    },

    //initialization function
    _create: function() {

        var instance = this;

        //store reference to the ul
        this._vars.element = this.element;

        //add class "tagit" for theming
        this._vars.element.addClass("tagit");

        //add any initial tags added through html to the array
        this._vars.element.children('li').each(function() {
            instance.options.initialTags.push($(this).text());
        });

        //add the html input
        this._vars.element.html('<li class="tagit-new"><input class="tagit-input" type="text" /></li>');

        this._vars.input = this._vars.element.find(".tagit-input");

        //setup click handler
        $(this._vars.element).click(function(e) {
            if (e.target.tagName == 'A') {
                // Removes a tag when the little 'x' is clicked.
                $(e.target).parent().remove();
                instance._popTag();
            }
            else {
                instance._vars.input.focus();
            }
        });

        //setup autcomplete handler

        this.options.appendTo = this._vars.element;
        this.options.source = this.options.tagSource;
        this.options.select = function(event, ui) {
            instance._addTag(ui.item.value, ui.item.id);
            return false;
        }
        this._vars.input.autocomplete(this.options);

        //setup keydown handler
        this._vars.input.keydown(function(event) {
            var lastLi = instance._vars.element.children(".tagit-choice:last");
            if (event.which == instance._keys.backspace)
                return instance._backspace(lastLi);

            if (lastLi.hasClass('selected'))
                lastLi.removeClass('selected');

            // Comma/Space/Enter are all valid delimiters for new tags.
            else if (event.which == instance._keys.comma || (event.which == instance._keys.space && !instance.options.allowSpace) || event.which == instance._keys.enter) {
                event.preventDefault();
                instance._addTag(this.value, 0);
            }
            instance._vars.lastKey = event.which;
        })

        //define missing trim function for strings
        String.prototype.trim = function() {
            return this.replace(/^\s+|\s+$/g, "");
        };

        this._initialTags();

    },
    _popTag: function() {
        return this._vars.tags.pop();
    },

    _addTag: function(value, id) {
        id = (id == null ? 0 : id);
        this._vars.input.val("");
        value = value.replace(/,+$/, "");
        value = value.trim();
        if (value == "" || this._exists(value))
            return false;

        var tag = "";
        tag = '<li class="tagit-choice">' + value + '<a class="tagit-close">x</a></li>';
        $(tag).insertBefore(this._vars.input.parent());
        this._vars.input.val("");
        this._vars.tags.push({id: id, value: value});
    },

    _exists: function(value) {
        if (this._vars.tags.length == 0)
            return false;
        for (var i = 0; i <= this._vars.tags.length-1; i++)
            if (this._vars.tags[i].value == value)
                return true;
        return false;
    }
    ,

    _oc: function(array) {
        var object = {};
        for (var i = 0; i < array.length; i++) {
            object[array[i]] = '';
        }
        return object;
    }
    ,

    _backspace: function(li) {
        if (this._vars.input.val() == "") {
            // When backspace is pressed, the last tag is deleted.
            if (this._vars.lastKey == this._keys.backspace) {
                $(this)._tagger('remove');
                li.remove();
                this._vars.lastKey = null;
            } else {
                li.addClass('selected');
                this._vars.lastKey = this._keys.backspace;
            }
        }
        return true;
    }
    ,

    _initialTags: function() {
        if (this.options.initialTags.length != 0) {
            for (var i in this.options.initialTags)
                if (!this._exists(this.options.initialTags[i]))
                    this._addTag(this.options.initialTags[i]);
        }
    }
    ,

    tags: function() {
        return this._vars.tags;
    }
})
        ;

Answer 1

你可以关注

success : function(data) {
   $.lightbox(data);
   $('#groups').tagit("destroy").tagit();
}

不要忘记覆盖类中的destroy方法

destroy: function() {
       $.Widget.prototype.destroy.apply(this, arguments); // default destroy
        // now do other stuff particular to this widget
   }

根据您的需要，我认为你应该摧毁你的变种，清除它们，免费连接和解除绑定事件。 destroy方法应该将应用了窗口小部件的元素恢复到原始状态。

这就是做基础破坏方法，只是为了知道你可以使用它。

destroy: function() {
        this.element
            .unbind( "." + this.widgetName )
            .removeData( this.widgetName );
        this.widget()
            .unbind( "." + this.widgetName )
            .removeAttr( "aria-disabled" )
            .removeClass(
                this.widgetBaseClass + "-disabled " +
                "ui-state-disabled" );
    }

销毁jquery ui插件实例

1 个答案: