jquery - 为什么文本被附加多次

Question

我尝试添加功能以允许用户通过添加/删除/修改表及其数据来编辑表的值。

我已经设法让它做我想做的事情，但我想要附加的文本被附加了 4 次，我不够聪明，无法理解为什么。

我在这里设置了演示http://jsfiddle.net/a973/CWQh9/1

这是触发的代码

$('#saveBtn').live("click", function(){
    var txt = $("#compName").val();
    var txt2 = $("#orgnr").val();

    $(".itms").fadeOut("normal", function() {
            $(this).remove();

            $('#comp').append(txt);
            $('#orgn').append(txt2);
            $('#nextLast').append('<a href="#">change</a>')
            $('#lastTd').append("<a href='#'>erase</a>");

    });

谁能帮我去掉这 3 个额外的文本实例？

最终结果将仅用于演示/原型(prototype)目的。

Answer 1

这是因为处理程序是为每个 “.itms” 调用的。因此每次调用 append() 函数时。

我在下面的评论中添加了您所要求的内容。

新解决方案:Fiddle

这样做:

$('#saveBtn').live("click", function () {
    var txt = $("#compName").val();
    var txt2 = $("#orgnr").val();
    //$('#compName, #orgnr, #saveBtn, #cncl').remove();

    setTimeout( function() {
        $('#comp').append(txt);
    $('#orgn').append(txt2);
    $('#nextLast').append('<a href="#">change</a>')
    $('#lastTd').append("<a href='#'>erase</a>");
    }, 500);

    $(".itms").fadeOut("normal", function () {
        $(this).remove();
    });
    $('#raden').effect("highlight", {}, 1000);
});