javascript - jQuery - 删除克隆的元素

Question

我正在尝试制作一个可以选择添加和删除新元素的网络表单。我可以将其用作源或克隆元素之外的按钮，但我无法在克隆元素中使用“删除”按钮。

HTML代码是:

<table>
    <tr><td class="associate_column_left">
        Bursary award rates:</td><td class="associate_column_right">
        <div class="clone">£ <input type="text" name="AMOUNT" value="100" class="cl"><a href="#" class="remove_trigger">Delete amount</a></div>
        <div class="placer"></div>
        <p><a href="#" class="clone_trigger">Add another bursary award amount</a> &nbsp; <a href="#" class="remove_trigger">Remove last bursary award amount</a></p>
    </td></tr>
</table>

而当前的 jQuery 是:

// Start code for duplicating a div box
$(document).ready(function(){
    $(".clone_trigger").click(function () {
        $('.clone').first().clone().insertBefore(".placer");
        $('input.cl:last').val('');
        event.preventDefault();
    });
});
// End code for duplicating a div box

// Start code for removing an already duplicated div box
$(document).ready(function(){
    $(".remove_trigger").click(function () {
        if ($(".clone").length != 1) {
            $(".clone:last").remove();
        }
        //$('.clone:last').not('.clone:first').remove();
        event.preventDefault();
    });
});
// End code for removing an already duplicated div box

这是一个在 http://jsfiddle.net/dalepotter/fr8p8/1/ 工作的 jfiddle

表格底部的“添加另一个助学金金额”和“删除最后一个助学金金额”链接工作正常，但“删除金额”不起作用 - 这意味着删除它所在的行。

但似乎有些不对劲...如果有人有任何建议，请告诉我 - 这让我有点抓狂!

非常感谢您抽出宝贵的时间...

Answer 1

问题是当您附加点击事件处理程序时，.remove_trigger-elements 不存在，请尝试更改此行

$(".remove_trigger").click(function () {

对此

$("table").on("click", ".remove_trigger", function () {