Question

我从jQuery 1.10.2中得到了一个错误，最后一个错误，我知道是否有任何（其他）解决方案可以解决这个问题。

我的脚本从一个模型（项目模型）创建多个DIV块（命名项目），在最后一个模型之后添加当前值并以“盲”效果显示它。

以下是代码，但您也可以在this link在线测试。

<div id="item_model" style="display: none;" class="item">MODEL</div>
<button class="addBtn">Add 5 items</button>

<script>
$(".addBtn").click(function() {
    for( var i=0; i<5; i++ ) {
        // Clone model
        var p = $("#item_model").clone(true, true);

        // Modify item
        p.removeAttr("id");
        p.text("ITEM n°"+(i+1));

        // Add item to the DOM
        $(".item").last().after(p);

        // Show item
        $(p).show("blind");
        //$(p).show();
    }
});
</script>

问题与：last和insertAfter（）。

相同

逻辑：

第一项显示效果很好（或没有，另一个错误？但时间已过）
在效果动画期间，该元素被外包替换。
接下来的项目是从DOM中插入的（事件，如果after（）应该在DOM中插入），所以页面中没有。

这种行为是jQuery的一个错误，但我必须克服这个问题。

我知道的解决方案：

不要使用任何效果。
使用容器并追加（）。
使用慢效而不是盲目。（感谢A. Wolff）
向DOM和AFTER添加元素，显示全部。（感谢A. Wolff）

感谢您的贡献。

Answer 1

这段代码修复了它：

$(".addBtn").click(function () {
    var p = $("#item_model").clone(true),
        tmp = $();
    p.removeAttr("id");
    for (var i = 0; i < 5; i++) {
        tmp = tmp.add(p.clone(true).text("ITEM n°" + (i + 1)));
    }
    $(".item").last().after(tmp);
    tmp.show("blind");
});

DEMO

Answer 2

我找到了一个合理的（如果错综复杂的）解释你的错误。

根本原因：您正在使用jquery-ui效果（不是基本的jquery效果），并且在动画结束之前在最后插入的项目之后添加元素。
getcha：jquery-ui在其动画中使用包装器，如果已经存在包装器，它会重用它。

以下是详细的演练：

动画第一项时：在效果持续时间内，该项目被包装在一个带有ui-effects-wrapper类的div中，并且此包装div被设置为动画以提供blind效果
添加第二项时：在“last”之后添加它（＆lt; - 在这种情况下：第一项）实际上将它添加到包装器中。
动画第二项时：jquery-ui重用现有的包装器（createWrapper中的快捷方式，见下文）
同样适用于第3-5项
当第一个动画结束时，将移除包装元素并替换第一个动画元素。其他元素（记住：它们是作为这个包装器的子项附加的）最终没有父母。

相关代码：
jquery-ui code : snippet 1 - blind() function
jquery-ui code : snippet 2 - createWrapper() inner function
jquery-ui code : snippet 3 - blind() code when animation completes

我不认为这应该被认为是一个jquery-ui错误 - 你的用例是，恕我直言，相当孤立，我不会想象这会在其他地方触发“纠正”。

解决方案：

slideDown将有效（fiddle - 它会动画元素，不会有包装）
添加<span id="beacon"></span>项并在 #beacon

A. Wolff's solution

正如您已经发现的那样，.append()在一个公共容器上

jQuery show（）以last（），after（）和“blind”效果失败

2 个答案: