Les éléments dynamiques ne sont pas créés correctement dans Jquery Plugin

Question

J'ai écrit une requête de masquage qui est supposée ajouter des éléments dynamiques à un élément d'entrée existant.

var link = $('<a title="show" role="link" href="#" class="masker-value">show</a>'); 

wrapper: function() { 
    container = $(container) 
    .attr('ispartial', this.options.partial) 
    .attr('readyonly', this.options.readyOnly); 
    $(this.element).wrap(container); 
    if (!this.options.hideToggle) 
    $(this.element).after(link); 
} 

Si j'ai une seule entrée sur une page, le code ci-dessus fonctionne très bien, mais si j'ai entrées multiples, le link est seulement ajouté à la dernière entrée.

Demo

Answer 1

Ajoutez la ligne suivante à la fonction wrapper:

link = $('<a title="show" role="link" href="#" class="masker-value">show</a>'); 

Vous avez défini lien globalement en dehors de la fonction enveloppe de sorte que son référant toujours au même objet, qui est déplacé dans les DOM.

Exemple: https://jsfiddle.net/nxvdm5hr/5/

Des explications complémentaires:

Lorsque vous utilisez $('<a/>'), jQuery crée une entrée élément DOM.

Lorsque vous .after() cet élément, il se détache de la position précédente.

Vous pouvez également modifier le var link au code HTML, ce qui résoudra également votre problème.