1

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

我已经设法让它做我想做的事，但是我想附加的文本被附加了 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 个额外的文本实例？

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

4

5 回答 5

1

我猜$('.itms')选择器匹配页面上的四个元素。因此回调函数被调用了四次。这意味着追加调用发生了四次。

于 2013-03-25T16:34:50.620 回答
1

那是因为处理程序会为您的每个".itms". 所以每次append()调用该函数。

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

新解决方案：小提琴

这样做：

$('#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);
});
于 2013-03-25T16:35:17.577 回答
1

将这四行移到 fadeOut 调用之外：

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

所以你得到这个：

$('#saveBtn').live("click", function () {
    var txt = $("#compName").val();
    var txt2 = $("#orgnr").val();
    $('#comp').append(txt);
    $('#orgn').append(txt2);
    $('#nextLast').append('<a href="#">change</a>')
    $('#lastTd').append("<a href='#'>erase</a>");
    $(".itms").fadeOut("normal", function () {
        $(this).remove();
    });
})

否则，您的附加会被多次调用，每次调用一次.itms。

jsFiddle 示例（请注意，由于 live 已被弃用.live()为.on()

于 2013-03-25T16:36:44.787 回答
0

最可能的原因是 css 类 .itms 有四个元素，因此回调被触发了四次。正如我看到的代码，表中有四个 td ，因此被触发了四次

于 2013-03-25T16:35:30.703 回答
0

因为有多个元素与您的选择器匹配，所以该函数会被多次调用。尝试在单击的元素上执行此操作。

 $(".itms").click().fadeOut("normal", function() {

            $(this).remove();

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


    });
于 2013-03-25T16:36:24.343 回答