jquery删除作为克隆的父元素
我有以下html:jquery删除作为克隆的父元素,jquery,Jquery,我有以下html: <div class="row trackingRow"> <div class="large-2 medium-2 columns text-right no-margin"> <p>Customerwise</p> </div> <div class="large-3 medium-3 columns"> <input type="text
<div class="row trackingRow">
<div class="large-2 medium-2 columns text-right no-margin">
<p>Customerwise</p>
</div>
<div class="large-3 medium-3 columns">
<input type="text" class="radius" />
</div>
<div class="large-7 medium-7 columns">
<a href="#" target="_blank" class="button tiny success radius">open ticket in new window</a>
<a href="#" class="button tiny secondary radius deleteTracking"><img src="img/trash_icon.png" /></a>
<a href="#" class="button tiny radius addAnother"><img src="img/tiny_plus_icon.png" /></a>
</div>
</div>
定制
我目前正在使用jquery在单击“AddOther”链接时克隆整个“trackingRow”div,这样我的客户机就可以输入与票证关联的尽可能多的ID。他们还需要能够删除它们。我能够通过以下方式实现功能:
<script>
$(".addAnother").click(function () {
var cloneDiv = $(this).closest(".trackingRow").clone();
cloneDiv.find("a.addAnother").remove();
cloneDiv.insertAfter($(this).closest(".trackingRow"));
});
$(".trackingRow").on("click", ".deleteTracking", function () {
$(this).closest(".trackingRow").remove();
});
</script>
$(“.addother”)。单击(函数(){
var cloneDiv=$(this.closest(“.trackingRow”).clone();
cloneDiv.find(“a.addother”).remove();
cloneDiv.insertAfter($(this.closest(.trackingRow));
});
$(.trackingRow”)。在(“单击”,“删除跟踪”,函数(){
$(this).closest(“.trackingRow”).remove();
});
但是删除任何克隆的trackingRow都不起作用,只有原始的trackingRow。我缺少什么?您正在使用委托事件处理:
$(".trackingRow").on("click", ".deleteTracking", function () {
$(this).closest(".trackingRow").remove();
});
但是,您只将事件处理程序附加到原始元素(它不会附加到新创建的trackingRow
克隆,因为它们在您安装事件处理程序时不存在)。您需要选择一个父对象,该对象是一个父对象,但它是静态的(不是动态创建的),以便将委托事件处理程序附加到它。由于您不显示HTML,我将显示文档
对象作为静态父对象,但您可能会找到一个更靠近按钮的静态父对象,这会更好:
// best to pick a static parent as close to deleteTracking as possible
// document will work, but it's better practice to pick a closer parent that
// is not dynamically created itself
$(document).on("click", ".deleteTracking", function () {
$(this).closest(".trackingRow").remove();
});
哇,我觉得自己很笨。这是一个显而易见的解决办法。一直盯着这个代码看太久了。:)谢谢