Javascript jQuery克隆和绑定事件问题

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

在“删除到将成为最后一个克隆的上一个克隆”之前，所有操作都有效，但我的“删除a”标记将停止工作。请让我知道我做错了什么

我的JSFIDLE（很抱歉没有在我的JSFIDLE中添加任何css，因为它太大了）

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

$（文档）.ready（函数（）{
$（“.addFlightBtn”）。单击（函数（）{
$（“.flightRows”）.append（$（“.flightRow:first”）.clone（）；
$（.flightRow”）.find（.exclude”）.removeClass（“exclude”）；
var flightLength=$（“.flightRows”）.childrence（“.flightRow”）.length；
$（“.flightRow:last”）.find（“#lbfligh”）.html（“fligh”+flightLength）；
$（“.flightRow:last”）.find（“.addFlightBtn”）.addClass（“排除delFlightBtn”）.removeClass（“addFlightBtn”）.html（“删除航班”）；
$（“.flightRow”）.not（':first'）.find（'a'）.not（'.exclude'）.remove（）；
$（“.flightRow:last”）.find（“.delFlightBtn”）.bind（“单击”，函数（）{
$（this）.closest（“.flightRow”）.prev（）.find（“.searchBtnHolder”）.html（“”）；
$（this）.closest（“.flightRow”）.remove（）；
});
});
});

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

我只改变了你的删除事件处理程序，这就是为什么。这里是

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

$（文档）.on（“单击“，”.delFlightBtn”，函数（）{
如果（$（“.flightRow”）.length>2）{
$（this）.closest（“.flightRow”）.prev（）
.find（“.searchBtnHolder”）
.html（“”）；
}
$（this）.closest（“.flightRow”）.remove（）；
});

在修复事件处理程序之后，您将发现另一个问题，该问题已由此行修复

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

if（$（“.flightRow”）.length>2）{
$（this）.closest（“.flightRow”）.prev（）
.find（“.searchBtnHolder”）
.html（“”）；
}

$（文档）.ready（函数（）{
$（“.addFlightBtn”）。单击（函数（）{
$（“.flightRows”）.append（$（“.flightRow:first”）.clone（）；
$（.flightRow”）.find（.exclude”）.removeClass（“exclude”）；
var flightLength=$（“.flightRows”）.childrence（“.flightRow”）.length；
$（“.flightRow:last”）.find（“#lbfligh”）.html（“fligh”+flightLength）；
$（“.flightRow:last”）.find（“.addFlightBtn”）.addClass（“排除delFlightBtn”）.removeClass（“addFlightBtn”）.html（“删除航班”）；
$（“.flightRow”）.not（':first'）.find（'a'）.not（'.exclude'）.remove（）；
});
$（文档）.on（“单击“，”.delFlightBtn”，函数（）{
如果（$（“.flightRow”）.length>2）{
$（this）.closest（“.flightRow”）.prev（）.find（“.searchBtnHolder”）.html（“”）；
}
$（this）.closest（“.flightRow”）.remove（）；
});
});

航班1

出发城市


阿布扎比（奥赫）
安曼（安曼）
巴林（巴林）
曼谷（BKK）
贝鲁特（贝伊）
开罗（CAI）
蒂鲁瓦南塔普兰（TRV）
到达城市


阿布扎比（奥赫）
安曼（安曼）
巴林（巴林）
曼谷（BKK）
贝鲁特（贝伊）
开罗（CAI）
蒂鲁瓦南塔普兰（TRV）
离开



乘客

成人


1.
2.
3.
4.
5.
6.
7.
8.
9


（12岁以上）
儿童


0
1.
2.
3.
4.
5.
6.
7.
8.


（2-11岁）
婴儿


0
1.


（2岁）
等级


经济舱的
商务舱
头等舱
付款方式


K-Net
信用卡
促销代码