Détruire les instances du plugin jQuery UI
-
29-10-2019 - |
Question
J'ai un plugin de balisage.
Le plugin est utilisé sur un élément d'un formulaire généré via AJAX.
quelque chose comme
...
success : function(data) {
$.lightbox(data);
$('#groups').tagit();
}
...
Maintenant, lorsque le formulaire est soumis (par ajax), la Lightbox est supprimée, donc le formulaire aussi.
Mais,
Si je clique sur le bouton pour créer un nouveau formulaire, le plugin est dans son état précédent, même si #Groups est désormais un élément DOM complètement nouvel.
Pourquoi est-ce et comment puis-je le réparer?
(par le même état, je veux dire)
J'ai une variable est le plugin
_vars : {tags: []}
Cela est rempli à mesure que des balises sont ajoutées. Lorsque le plugin est à nouveau appelé sur le nouveau #Groups, la variable de balises contient toutes les balises de l'instance précédente.
Comment puis-je réparer cela?
Code
$.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;
}
})
;
Pas de solution correcte