6

I'm getting a bug from jQuery 1.10.2, the last one, and I would know if anybody have any (other) solution for this issue.

My script create multiple DIV blocks (named items) from one model (item model), add the current after the last one and display it with a "blind" effect.

Here is the code but you can also test it online at 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>

The issue is the same with :last and insertAfter().

The logic:

  • First item is well displayed and its effect occurred (or not, another bug ? but the time elapses)
  • During an effect animation, the element is outsourced ou replaced.
  • The next items are inserted out of the DOM (event if after() should insert it in the DOM), so there are not in the page.

This behavior is an error from jQuery but I have to overcome this problem.

The solutions i know:

  • Don't use any effect.
  • Use a container and append().
  • Use slow effect instead of blind. (Thanks to A. Wolff)
  • Add elements to the DOM and AFTER, show all. (Thanks to A. Wolff)

Thanks to all for your contribution.

4

2 回答 2

1

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

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

这是详细的演练：

  • 为第一个项目设置动画时：在效果期间，该项目被包装在一个带有 class 的 div 中ui-effects-wrapper，并且这个包装器 div 被动画以给出blind效果
  • 添加第二项时：在“last”之后添加（<- 在这种情况下：第一项）实际上将其添加到包装器中。
  • 为第二项设置动画时：jquery-ui 重用现有包装器（中的快捷方式createWrapper，见下文）
  • 项目 3-5 也是​​如此
  • 当第一个动画结束时，包装元素被移除并替换为第一个动画元素。其他元素（请记住：它们是作为这个包装器的子元素附加的）最终没有父元素悬空。

相关代码：
jquery-ui 代码：片段 1 -blind()函数
jquery-ui 代码：片段 2 -createWrapper()内部函数
jquery-ui 代码：片段 3 -blind()动画完成时的代码

我不认为这应该被视为一个 jquery-ui 错误 - 恕我直言，您的用例是非常孤立的，我无法想象这会在其他地方触发什么“更正”。

解决方案：

  • slideDown将工作（小提琴- 它动画元素，没有包装那里）
  • 添加一个项目并在之前<span id="beacon"></span>插入新元素 #beacon
  • A. Wolff 的解决方案
  • 正如您已经发现的那样，.append()在一个普通容器上
于 2013-10-10T14:54:08.520 回答
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");
});

演示

于 2013-09-23T08:54:55.130 回答