tokenfield 不适用于 jQuery 克隆答案

【问题标题】：tokenfield doesn't work with jQuery Clonetokenfield 不适用于 jQuery 克隆
【发布时间】：2019-06-22 00:16:45
【问题描述】：

您好，我正在使用tokenfield 创建输入标签。

我试图克隆元素但没有成功。有什么方法可以进行正确的克隆吗？这是一个动态表单。

问题：克隆后字段不起作用。我认为问题在于令牌。

这是我的 JavaScript 代码：

$('.tokenfield').tokenfield();

这是我的克隆功能：

$('.clone').on('click',function(){
  var newLine = $(".attribute:first").clone();
  $("#variants").append(newLine);
});

这是我的 HTML 代码：

<div id="variants">
  <div class="row attribute">
    <div class="col-lg-4">
      <div class="input-group"> <span class="input-group-prepend">
        <button class="btn btn-light clone" type="button"><i class="icon-plus3"></i></button>
        </span> <input type="text" class="form-control" placeholder="Left button"> </div>
      </div>
      <div class="col-lg-8">
        <div class="form-group mb-1"> <input type="text" class="form-control tags tokenfield" name="variant[value][]" value=""><br>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

使用.clone(true) 复制所有动态属性和事件处理程序。
您调用 .clone() 没有参数，您需要 .clone(true) 来克隆事件
谢谢大家，我不是在谈论克隆功能，我可以克隆，但克隆后标签不起作用（我想我必须为 tokenfield 生成一个新令牌）我已经尝试过了，你能和我核实一下吗，我需要你的帮助
“我可以克隆，但克隆后标签不起作用”如果标签不起作用，那么我认为不，你没有真正克隆它。将true 传递给clone( 可能会解决您的问题。
克隆是好的，但是标签输入的问题他们不起作用

标签： javascript jquery html bootstrap-tokenfield

【解决方案1】：

您正在克隆整个.attribute div...其中包括一个input，它在...上有一个 tokenkenfield 的实例...

正如 Barmar 所说，.clone(true) 将“深度克隆”，这意味着它还将克隆属性和事件...但是您是在谈论一个 instance一个孩子的插件。这就是故事结局糟糕的地方；）

幸运的是，有办法。您只需在新的 input 上创建另一个 tokenkenfield 实例。

类似这样的：

$('.clone').on('click',function(){
  var newLine = $(".attribute:first").clone();
  $("#variants").append(newLine);
  $("#variants").find(".tokenfield").last().tokenfield();  // New instance here.
});

免责声明：未经测试（但是，希望你明白了这个概念...... ;)）

【讨论】：

请帮忙