javascript - 在 Jquery 插件中未正确创建动态元素

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

如果我在页面上只有一个输入，上面的代码可以正常工作，但如果我有多个输入，链接 只会添加到最后一个输入。

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 代码，这也将解决您的问题。