Question

我正在尝试制作一个可以添加和删除新元素的Web表单。我可以将它作为源或克隆元素之外的按钮工作，但是我在使用“删除”按钮在克隆元素中工作时遇到问题。

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/

的工作小问题

表格底部的“添加另一个助学金额”和“删除最后一个助学金额”链接工作正常，但不是“删除金额” - 这意味着删除其中包含的行。

有些事似乎是错的......如果有人有任何建议请告诉我 - 这让我有点疯狂！

非常感谢你能给予的任何时间......

Answer 1

问题是当您附加click事件处理程序时，.remove_trigger元素不存在，请尝试更改此行

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

到这个

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

Answer 2

使用：

$(".remove_trigger").live('click', function () {

在你的jquery版本中，live的工作非常精彩。 http://jsfiddle.net/XgjKy/

Answer 3

这将执行您想要的操作，也会阻止您通过错误修复删除第一个输入字段。问题是click事件只在doc ready上设置，然后克隆尚未启动。

顺便说一下：如果你想再次删除第一行，你必须修复删除处理程序...

// Start code for duplicating a div box
$(document).ready(function(){
    $(".clone_trigger").on("click",function () {
        var cloneElem = $('.default').clone().attr("class", "clone");
        cloneElem.find(".remove_trigger").on("click", function() {
            $(this).parent().remove();
        });
        cloneElem.insertBefore(".placer");
        $('input.cl:last').val('');
        event.preventDefault();
    });

    $(".remove_trigger").on("click", function () {
        $(".clone:last").remove();
        event.preventDefault();
    });
});
// End code for removing an already duplicated div box

jQuery - 删除克隆元素

3 个答案: