jQuery附加一段兩次

我創建了一個jQuery動畫和奇怪的是，當我追加一個新的段落時，它追加了兩次，問題只發生在2個前面的段落被追加時，可能這是一個jQuery bug ..否則，我希望有一個人可以幫助我。jQuery附加一段兩次

HTML：

<body> 
    <div id="element"> 
    </div> 
</body>

的JavaScript：

$(function() { 
    animation(); 
}); 

function animation() 
{ 
    $('<p id="p1">paragraph 1</p>').appendTo('#element'); 
    $('<p id="p2">paragraph 2</p>').appendTo('#element'); 
    $('#p1, #p2').fadeOut(600, function(){ 
     $('#p1, #p2').remove(); 
     var $p3 = $('<p>paragraph 3 </p>').appendTo('#element'); 
    }); 
}

問題是與「第3款」是附加的兩倍！你可以在這裏運行代碼： http://jsfiddle.net/jonah13/QLM2s/

感謝，尤尼斯

來源

2012-05-07 jonah13

感謝的jsfiddle在Q - 使我們的生活更輕鬆！ –

@RobCooper：不客氣，感謝您的幫助！ – jonah13

我不知道爲什麼其他解決問題的答案是倒票，因爲他們發現了問題。

這是修復它的代碼。從jQuery docs注意，如jQuery的1.6（我假設你使用以來的jsfiddle使用1.7.2），你可以用.promise()：

在jQuery 1.6中，.promise()方法可以在使用結合deferred.done()方法在所有匹配元素完成其動畫時爲整個動畫執行單個回調。

我已經更新了你的提琴：

$(function() { 
    animation(); 
}); 

function animation() 
{ 
    $('<p id="p1">paragraph 1</p>').appendTo('#element'); 
    $('<p id="p2">paragraph 2</p>').appendTo('#element'); 
    $('#p1, #p2') 
    .fadeOut(600) 
    .promise().done(function() { 
     $('#p1, #p2').remove(); 
     var $p3 = $('<p>paragraph 3 </p>').appendTo('#element'); 
    });   
}

來源

2012-05-07 07:31:05

有趣。我從來沒有見過諾言（）。 – BenjaminRH

謝謝，解決了這個問題，我學到了一些新東西 – jonah13

非常歡迎@ jonah13，很高興聽到它！ :) –

提供給功能是每其中選擇匹配元素觸發一次。由於選擇器返回兩個元素，它會被觸發兩次，因此會附加兩個段落。

變形例這裏：http://jsfiddle.net/QLM2s/1/

來源

2012-05-07 07:20:57

不知道爲什麼這是低估 - 這確實是問題。 –

是的，這完全有道理，我解決了這個問題！謝謝！！ – jonah13

@ jonah13：如果它回答你的問題，請記住標記爲已接受。 – BenjaminRH

的問題是其中淡出第1和第2：jQuery的正在執行淡出功能內的代碼爲每次給它（在這種情況下，兩段所以兩個選擇追加）。

來源

2012-05-07 07:21:46 BenjaminRH

不知道爲什麼這是低票 - 這確實是問題。 –

@Rob Cooper：同意。倒票真的應該有一個解釋。 – Tuan

-1

這似乎很好地工作

$(function() { 
    animation(); 
}); 

function animation() 
{ 
    $('<p id="p1">paragraph 1</p>').appendTo('#element'); 
    $('<p id="p2">paragraph 2</p>').appendTo('#element'); 
    $('#p1').fadeOut(600, function(){ 
     $('#p1').fadeOut(); 
     $('#p1, #p2').remove(); 
     var $p3 = $('<p>paragraph 3 </p>').appendTo('#element'); 
    }

）; }

來源

2012-05-07 07:23:30 Paras

假設再次淡出'p1'是一個錯字。但這不會在同一時間淡出。 –

由於淡出（）被解僱兩次更好清空追加到div的前一段。

試試下面的代碼：

$(function() { 
animation(); 
}); 
function animation() 
{ 
$('<p id="p1">paragraph 1</p>').appendTo('#element'); 
$('<p id="p2">paragraph 2</p>').appendTo('#element'); 
$('#p1, #p2').fadeOut(600, function(){  
     $('p').empty(); 
    var $p3 = $('<p>paragraph 3 </p>').appendTo('#element'); 
}); 
}

來源

2014-09-22 20:18:07

jQuery附加一段兩次

回答

相關問題