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:
This behavior is an error from jQuery but I have to overcome this problem.
The solutions i know:
Thanks to all for your contribution.
This snippet fixes it:
$(".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
I found a rational (if intricate) explanation for your bug.
The root cause : you are using a jquery-ui
effect (not a basic jquery
effect), and you add elements after last inserted item, before the animation has finished.
The gotcha : jquery-ui uses wrappers during its animations, and if a wrapper is already present, it reuses it.
Here is the detailed walkthrough :
ui-effects-wrapper
, and this wrapper div is animated to give the blind
effectcreateWrapper
, see below)Relevant pieces of code :
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
I don't think this should be considered as a jquery-ui bug - your use case is, IMHO, pretty isolate, and I wouldn't imagine what "correcting" this would trigger elsewhere.
Solutions :
slideDown
will work (fiddle - it animates the element, no wrapper there)<span id="beacon"></span>
item and insert new elements before #beacon
.append()
on a common containerIf you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With