Question

我有以下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" 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克隆整个＆＃34; trackingRow＆＃34; div任何时候＆＃34; addAnother＆＃34;单击链接以便我的客户端可以输入与故障单相关联的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>

但是删除对任何克隆的trackingRow都没有工作，只有原始版本。我错过了什么？

Answer 1

您正在使用委托事件处理：

$(".trackingRow").on("click", ".deleteTracking", function () {
    $(this).closest(".trackingRow").remove();
});

但是，您只将事件处理程序附加到原始元素（它不会附加到新创建的trackingRow克隆，因为它们在您安装事件处理程序时不存在）。您需要选择父对象，但它是静态的（不是动态创建的）以将委托事件处理程序附加到。由于您没有显示HTML，我会将document对象显示为静态父级，但您可能会找到一个更接近按钮的静态父级，这样会更好：

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

jquery删除作为克隆的父元素

1 个答案: