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

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

Demo

Answer 1

将以下行添加到 wrapper 函数中：

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

您在包装函数外部全局定义了 link，因此它始终引用同一个对象，该对象在 DOM 中移动。

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

进一步说明：

当您使用 $('<a/>') 时，jQuery 会创建一个输入 DOM 元素。

当您 .after() 该元素时，它会从之前的位置分离。

您也可以将 var link 修改为 HTML 代码，这也可以解决您的问题。

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

Dynamic elements not created properly in Jquery Plugin

javascript

jquery

jquery-plugins