爲什麼文本被追加幾次

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個額外的實例？

最終結果將僅用於演示/原型目的。

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

Answer 2

我猜$('.itms')選擇器是匹配頁面上的四個元素。因此回調函數被調用四次。這意味着要追加的呼叫發生四次。

Answer 3

最有可能的原因是，有與CSS類.itms，因此回調發射四次四個元素。當我看到代碼時，表中出現了四個td，因此它被觸發四次

Answer 4

因爲有多個元素與您的選擇器匹配，所以函數被多次調用。嘗試在單擊元素上進行操作。

$(".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>"); 


    }); 

Answer 5

移動的淡出通話以外，這些四行：

$('#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 example（請注意，我還更新了.live()到.on()由於現場已被棄用。