时间戳

首页 > 解决方案 > tokenfield 不适用于 jQuery 克隆

javascript - tokenfield 不适用于 jQuery 克隆

问题描述

您好，我正在使用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>

标签： javascriptjqueryhtmlbootstrap-tokenfield

解决方案

您正在克隆整个.attributediv ...其中包括一个input在...

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

幸运的是，有办法。您只需在该 new 上创建另一个tokenkenfieldinput实例。

像这样的东西：

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

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

推荐阅读