jQuery 将一个段落追加两次

标签 jquery

我正在创建一个jquery动画,奇怪的是,当我追加一个新段落时,它会追加两次,只有在追加前两个段落时才会出现问题,可能这是一个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/

谢谢, 尤尼斯

最佳答案

我不知道为什么其他发现问题的答案被否决了,因为他们发现了问题。

这是修复它的代码。来自 jQuery docs 的注释,从 jQuery 1.6 开始(我假设您正在使用它,因为 jsFiddle 使用的是 1.7.2),您可以使用 .promise():

As of jQuery 1.6, the .promise() method can be used in conjunction with the deferred.done() method to execute a single callback for the animation as a whole when all matching elements have completed their animations.

我已经更新了你的 fiddle :

$(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');
   });         
}​

关于jQuery 将一个段落追加两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10478167/

相关文章:

javascript - JQuery Accordion 脚本中的 If/Else - 请检查语法

javascript - 使用 Rails 聊天 Web 应用程序 - 发送消息时页面自动滚动

javascript - 保持div之间的悬停状态处于事件状态

javascript - 在 Chrome 中使用 jquery 隐藏基本身份验证弹出窗口

javascript - JavaScript 中对 socket.io 的订阅过多

jquery - 为什么页面加载时会触发 jQuery 点击事件?

jquery - 使用 JQuery,如何检查下拉菜单是否包含值?

jquery - Bootstrap Popover 在主体点击时关闭

javascript - CSS 的笛卡尔失真效果

javascript - 如何在页面加载之前运行 JavaScript 代码?