jQuery Clone和select2

Question

我第一次在页面上从隐藏输入动态创建了select2，然后我用 a 标签克隆它。但是当我克隆div时，select2将不会出现。请帮助我，我做错了什么。我也认为select2事件也不适用于克隆元素

我的示例代码和我的js bin 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

您需要更改以下内容才能使此脚本正常工作 -

1. 在输入元素和其他元素中使用class而不是id。
2. 当您克隆第一行时，它还包含一个无效的select2。所以你需要删除它。
3. 在新添加的行输入上重新初始化新选择2。

这是一个演示。

＆＃13;
＆＃13;
$(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"
  })
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您是否尝试在绑定功能结束时调用getOrigin();函数？