jQuery克隆和绑定事件问题

时间：2017-02-16 11:11:50

标签： javascript jquery html css

我正在尝试在克隆发生时克隆带有 a 标记点击事件的一些元素的一个div我正在更改一个标记以删除并绑定点击事件。每当我添加更多克隆时，我将从之前的所有克隆中删除删除标记，并将其保留在上次克隆中。当用户点击带有点击事件的最后一个一个标记时，我将删除最后一个克隆标记，并将删除添加到将成为最后一个克隆的上一个克隆。

每件事都有效，直到＆＃34; 删除到之前的克隆，这将成为最后一次克隆＆＃34;但我删除标签将停止工作。请让我知道我做错了什么。

我的jsfiddle https://jsfiddle.net/milindsaraswala/6mt29a6x/（很抱歉没有把任何CSS放在我的jsfiddle中，因为它很大）

jQuery的示例代码

$(document).ready(function () {
        $(".addFlightBtn").click(function () {
            $(".flightRows").append($(".flightRow:first").clone());
            $(".flightRow").find(".exclude").removeClass("exclude");
            var flightLength = $(".flightRows").children(".flightRow").length;
            $(".flightRow:last").find("#lbFlight").html("Flight " + flightLength); 
            $(".flightRow:last").find(".addFlightBtn").addClass("exclude delFlightBtn").removeClass("addFlightBtn").html("Delete Flight");
            $(".flightRow").not(':first').find('a').not('.exclude').remove();
            $(".flightRow:last").find(".delFlightBtn").bind("click", function () {
                $(this).closest(".flightRow").prev().find(".searchBtnHolder").html('<a href="#" class="exclude delFlightBtn">Delete Flight</a>');
                $(this).closest(".flightRow").remove();
            });
        });
    });

1 个答案:

答案 0 :(得分：2)

  

您的代码很好，除了在添加html时使用委托事件绑定   动态。

我只更改了你的删除事件处理程序。这是 Working Fiddle 

$(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();
});

修复事件处理程序后，您会发现另一个由此行修复的问题

if ($(".flightRow").length > 2) {
   $(this).closest(".flightRow").prev()
   .find(".searchBtnHolder")
   .html('<a href="#" class="exclude delFlightBtn">Delete Flight</a>');
}

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(".addFlightBtn").click(function() {
    $(".flightRows").append($(".flightRow:first").clone());
    $(".flightRow").find(".exclude").removeClass("exclude");
    var flightLength = $(".flightRows").children(".flightRow").length;
    $(".flightRow:last").find("#lbFlight").html("Flight " + flightLength);
    $(".flightRow:last").find(".addFlightBtn").addClass("exclude delFlightBtn").removeClass("addFlightBtn").html("Delete Flight");
    $(".flightRow").not(':first').find('a').not('.exclude').remove();
  });
  $(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();
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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 id="lbFlight">Flight 1</span></strong></p>
          <div class="depCol1">
            <label for="seldcity1" id="lbDeptCity">Departure city</label>
            <br>
            <select>
              <option>Abu Dhabi (AUH)</option>
              <option>Amman (AMM)</option>
              <option>Bahrain (BAH)</option>
              <option>Bangkok (BKK)</option>
              <option>Beirut (BEY)</option>
              <option>Cairo (CAI)</option>
              <option>Thiruvananthapuram (TRV)</option>
            </select>
          </div>
          <div class="depCol1">
            <label for="seldcity2" id="lbArvlCity">Arrival city</label>
            <br>
            <select>
              <option>Abu Dhabi (AUH)</option>
              <option>Amman (AMM)</option>
              <option>Bahrain (BAH)</option>
              <option>Bangkok (BKK)</option>
              <option>Beirut (BEY)</option>
              <option>Cairo (CAI)</option>
              <option>Thiruvananthapuram (TRV)</option>
            </select>
          </div>
          <div class="depCol1">
            <label for="selddate1" id="lbDeptDate">Departing</label>
            <br />
            <input name="selddate1" type="text" id="selddate1" autocomplete="off" class="datepicker calIcon hasDatepicker">
          </div>
          <div class="searchBtnHolder"><a href="#" class="addFlightBtn">Add another Flight</a></div>
          <div class="clear"></div>
          <hr />
        </div>
      </div>
      <!--<div class="row">
				<p><strong>Flight 2</strong></p>
				<div class="depCol1">
					<label for="seldcity1" id="lbDeptCity">Departure city</label><br>
					<select>
						<option>Abu Dhabi (AUH)</option>
						<option>Amman (AMM)</option>
						<option>Bahrain (BAH)</option>
						<option>Bangkok (BKK)</option>
						<option>Beirut (BEY)</option>
						<option>Cairo (CAI)</option>
						<option>Thiruvananthapuram (TRV)</option>
					</select>
				</div>
				<div class="depCol1">
					<label for="seldcity2" id="lbArvlCity">Arrival city</label><br>
					<select>
						<option>Abu Dhabi (AUH)</option>
						<option>Amman (AMM)</option>
						<option>Bahrain (BAH)</option>
						<option>Bangkok (BKK)</option>
						<option>Beirut (BEY)</option>
						<option>Cairo (CAI)</option>
						<option>Thiruvananthapuram (TRV)</option>
					</select>
				</div>
				<div class="depCol1">
					<label for="selddate1" id="lbDeptDate">Departing</label><br />
					<input name="selddate1" type="text" id="selddate1" autocomplete="off" class="datepicker calIcon hasDatepicker">
				</div>
				<div class="searchBtnHolder"><a href="#" class="delFlightBtn">Delete Flight</a></div>
				<div class="clear"></div>
				<hr />
			</div>-->
      <div class="row">
        <p><strong>Passengers</strong></p>
        <div class="depCol1">
          <label for="seladults" id="lbAdults">Adults</label>
          <br>
          <select name="seladults" id="seladults" class="wth70 noMargin">
            <option value="1" selected="">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
          </select>
          <br>
          <span class="ageCount" id="lbAge12">(Age 12+)</span>
        </div>
        <div class="depCol1">
          <label for="selchildren" id="lbChildren">Children</label>
          <br>
          <select name="selchildren" id="selchildren" class="wth70">
            <option value="0" selected="">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
          </select>
          <br>
          <span class="ageCount" id="lbChild">(Age 2-11)</span>
        </div>
        <div class="depCol1">
          <label for="selinfants" id="lbInfants">Infants</label>
          <br>
          <select name="selinfants" id="selinfants" class="wth70">
            <option value="0" selected="">0</option>
            <option value="1">1</option>
          </select>
          <br>
          <span class="ageCount" id="lbInfant">(Age &lt;2)</span>
        </div>
        <div class="depCol1">
          <label for="class" id="lbClass">Class</label>
          <br>
          <select name="selcabinclass" id="class" class="wth150">
            <option selected="" value="0">Economy Class</option>
            <option value="1">Business Class</option>
            <option value="2">First Class</option>
          </select>
        </div>
        <div class="depCol1">
          <label for="payBy" id="lbpayBy">Pay By</label>
          <br>
          <select name="payBy" id="payBy" class="wth130">
            <option value="KNET">K-Net</option>
            <option selected="" value="CC">Credit Card</option>
          </select>
        </div>
        <div class="depCol2">
          <label for="promocode" id="lbPromoCode">Promo Code</label>
          <br>
          <input type="text" name="promocode" id="promocode" class="wth100 margin10">
        </div>
        <div class="clear"></div>
        <br />
        <br />
        <div>
          <input name="btnFindFlight" type="button" class="searchBtn" id="btnFindFlight" value="Find Flights">
        </div>
        <div class="clear"></div>
        <hr />
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题