動的要素がJquery Pluginで正しく作成されていない

Question

動的要素を既存の入力要素に追加すると仮定したマスキングjqueryを作成しました。

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); 
} 

私はページ上の単一の入力を持っている場合は、上記のコードは正常に動作しますが、私は複数の入力がある場合は、linkのみ最後の入力に追加されます。

Demo

Answer 1

wrapper関数に次の行を追加します。

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

そのは常にDOMに移動します同じオブジェクトへの参照のうえようにするには、ラッパー関数の外グローバルリンクを定義しました。

例：https://jsfiddle.net/nxvdm5hr/5/

さらなる説明：

あなたが$('<a/>')を使用し、jQueryの入力DOM要素を作成します。

この要素を.after()にすると、前の位置から切り離されます。

var linkをHTMLコードだけに変更することもできます。これによって問題が解決されます。