附加到选择 2 时，多个克隆不起作用

Question

任何人都可以让我知道以下代码有什么问题： HTML

<div class="form-wrapper">
         <div class="form-repaet">
          <div class="form-group">
            <select id="selecttag" name="book[0].tag" class="form-control select2 input-lg" style="width: 100%;">
              <option selected="selected">Tag</option>
              <option>1</option>
              <option>2</option>
            </select>
          </div>
          <div class="form-group">
            <select class="form-control select2" name="book[0].is" style="width: 100%;">
              <option selected="selected">is</option>
              <option>1</option>
              <option>2</option>
            </select>
          </div>
          <div class="form-group">
            <select class="form-control select2 test1" name="book[0].select_tag" style="width: 100%;">
              <option selected="selected">Select a Tag</option>
              <option>1</option>
              <option>2</option>
            </select>
          </div>

          <div class="form-group">
           <div class="btn-group m-r"> 
             <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"> 
              <span class="dropdown-label"><i class="ion-gear-b"></i></span> 
             </button> 
             <ul class="dropdown-menu dropdown-select"> 
              <li class="active">
               <a href="#">All</a>
              </li> 
              <li><a href="#">Option2</a></li> 
              <li><a href="#">Option3</a></li>  
             </ul> 
            </div>
          </div>
          <div class="clearfix"></div>
          <div class="line line-dashed line-lg pull-in"></div>
       </div>

JavaScript我正在使用以下 javascript 代码

$(document).ready(function(){
    var counter = 1;
    $("#add-form").click(function () {
        if(counter>10){
                alert("Only 10 textboxes allow");
                return false;
        }
        $(".form-repaet:last").clone().appendTo(".form-wrapper");
        //$(".form-repaet:last").select2();
        counter++;
    });

     $("#removebtn").click(function () {
      if(counter==1){
          return false;
       }
        $(".form-repaet").last().remove();
        counter--;
     });
  });

它正在创建 'form-repaet' div 的克隆，但选择框不起作用。我select2();在克隆后尝试过，但它不起作用。任何帮助，将不胜感激。非常感谢！

Answer 1

这是一个有效的jsFiddle

首先，在 select2 元素中添加另一个选择器，而不是select2因为它附加到spansselec2 创建的内容。这就是您收到该错误的原因：

对未使用的元素调用了 select2('destroy') 方法

就我而言，这是 xxx

并像这样使用：

$(".form-repaet:last").find('.xxx').select2('destroy');
var clone = $(".form-repaet:last").clone();
$('.form-wrapper').append(clone);
$('.xxx').select2();

我不在乎删除。

笔记

在 HTML 中，所有 ID 都应该是唯一的，所以在克隆时要注意它。