jQuery克隆和select2

Question

我已经在页面上首次从隐藏输入动态创建select2然后我用a标记克隆它。但是当我克隆的div select2不会出现。请有人帮助我做错了什么。我还想到的是选择2级的事件也不会在克隆元素工作

我的示例代码和我的JS斌https://jsbin.com/bibolox/edit?html,js,output

<div class="midcontainer pad20"> 
    <div class="content-area fullWidth whiteBg"> 
     <div class="pad15"> 
      <div class="flightRows"> 
       <div class="row flightRow"> 
        <p><strong><span id="lbFlight">Flight 1</span></strong></p> 
        <div class="depCol1"> 
         <label for="seldcity1" id="lbDeptCity"></label><br> 
         <input type="hidden" id="seldcity1" name="seldcity1" class="styled wth190" /> 
        </div> 
        <div class="depCol1"> 
         <label for="selddate1" id="lbDeptDate"></label><br /> 
         <input name="selddate1" type="text" id="selddate1" autocomplete="off" class="datepicker calIcon"> 
        </div> 
        <div class="searchBtnHolder"><a href="#" class="addFlightBtn">Add another Flight</a></div> 
        <div class="clear"></div> 
        <hr /> 
       </div> 
      </div> 
     </div> 

Answer 1

您需要更改下面让这个脚本working-

1. 使用类，而不是ID输入元素等元素。
2. 当你克隆第一行时，它也包含一个已经不工作的select2。所以你需要删除它。
3. 在新添加的行输入上重新初始化新选择2。

这是演示。

$(document).ready(function() { 
 
    getOrigin(); 
 
    $(".addFlightBtn").click(function() { 
 
    var newRow = $(".flightRow:first").clone(); 
 
    $(".flightRows").append(newRow); 
 
    //remove select2-container copied from previous row 
 
    $(newRow).find(".select2-container").remove(); 
 

 
    $(".flightRow").find(".exclude").removeClass("exclude"); 
 
    var flightLength = $(".flightRows").children(".flightRow").length; 
 
    $(newRow).find(".lbFlight").html("Flight " + flightLength); 
 
    $(newRow).find(".addFlightBtn").addClass("exclude delFlightBtn").removeClass("addFlightBtn").html("Delete Flight"); 
 
//reinitilize select 2 on newly added row 
 
    var select2 = $(newRow).find("input.seldcity"); 
 
    select2.select2({ 
 
     allowClear: true, 
 
     data: stations, 
 
     formatNoMatches: function() { 
 
     return "No Match"; 
 
     }, 
 
     width: 210, 
 
     placeholder: "Departure City" 
 
    }); 
 
    }); 
 
    $(document).on("click", ".delFlightBtn", function() { 
 
    if ($(".flightRow").length > 2) { 
 
     $(this).closest(".flightRow").prev().find(".searchBtnHolder").html('<a href="#" class="exclude delFlightBtn">Delete Flight</a>'); 
 
    } 
 
    $(this).closest(".flightRow").remove(); 
 
    }); 
 
    $("#selacity1").on("select2-selecting", function(e) { 
 
    if (e.val == "LHR") { 
 
     //do something 
 
    } else { 
 
     //do something 
 
    } 
 
    }); 
 
}); 
 
var stations = []; 
 

 
function getOrigin() { 
 

 
    stations.push({ 
 
    "id": "KWI", 
 
    "text": "Kuwait (KWI)" 
 
    }); 
 
    stations.push({ 
 
    "id": "LHR", 
 
    "text": "London (LHR)" 
 
    }); 
 
    stations.push({ 
 
    "id": "JFK", 
 
    "text": "New York (JFK)" 
 
    }); 
 
    $("input.seldcity").select2({ 
 
    allowClear: true, 
 
    data: stations, 
 
    formatNoMatches: function() { 
 
     return "No Match"; 
 
    }, 
 
    width: 210, 
 
    placeholder: "Departure City" 
 
    }) 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.min.css" rel="stylesheet" type="text/css"/> 
 
     <script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.min.js"></script> 
 
<div class="midcontainer pad20"> 
 
    <div class="content-area fullWidth whiteBg"> 
 
    <div class="pad15"> 
 
     <div class="flightRows"> 
 
     <div class="row flightRow"> 
 
      <p><strong><span class="lbFlight">Flight 1</span></strong></p> 
 
      <div class="depCol1"> 
 
      <label for="seldcity1" id="lbDeptCity"></label><br> 
 
      <input type="hidden" name="seldcity1" class="styled wth190 seldcity" /> 
 
      </div> 
 
      <div class="depCol1"> 
 
      <label for="selddate1" id="lbDeptDate"></label><br /> 
 
      <input name="selddate1" type="text" id="selddate1" autocomplete="off" class="datepicker calIcon"> 
 
      </div> 
 
      <div class="searchBtnHolder"><a href="#" class="addFlightBtn">Add another Flight</a></div> 
 
      <div class="clear"></div> 
 
      <hr /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

你试过打电话给你getOrigin();功能绑定功能的结束？