Why does the following jQuery code cause my browser to hang?
Caution: do not run this unless you are prepared to force quit your browser
<!DOCTYPE HTML>
<title>Simple clone</title>
<script type="text/javascript" src="jquery.js"></script>
<div>
<script>$('div').clone().appendTo('body');</script>
</div>
Edit
For those in the "infinite loop" camp, that should not be an issue. A perfectly safe (non-jQuery) version is:
<div>div
<script>
var el = document.getElementsByTagName('div')[0];
document.body.appendChild(el.cloneNode(true));
</script>
</div>
So the issue is specifically related to how jQuery does clones.
Edit 2
It seems that jQuery causes script elements in clones to be executed. That isn't standard behaviour and is something about how jQuery does clones that is quite unexpected.
Why does the following jQuery code cause my browser to hang?
Caution: do not run this unless you are prepared to force quit your browser
<!DOCTYPE HTML>
<title>Simple clone</title>
<script type="text/javascript" src="jquery.js"></script>
<div>
<script>$('div').clone().appendTo('body');</script>
</div>
Edit
For those in the "infinite loop" camp, that should not be an issue. A perfectly safe (non-jQuery) version is:
<div>div
<script>
var el = document.getElementsByTagName('div')[0];
document.body.appendChild(el.cloneNode(true));
</script>
</div>
So the issue is specifically related to how jQuery does clones.
Edit 2
It seems that jQuery causes script elements in clones to be executed. That isn't standard behaviour and is something about how jQuery does clones that is quite unexpected.
Share Improve this question edited Dec 5, 2011 at 1:30 RobG asked Dec 5, 2011 at 0:48 RobGRobG 148k32 gold badges179 silver badges215 bronze badges 15- 7 It seems kind-of obvious... – Šime Vidas Commented Dec 5, 2011 at 0:51
- 3 Your cloning the function itself, creating an infinite loop, destroying the entire intertweetyfaceweb galaxy, distrupting the space-time continuum! – adeneo Commented Dec 5, 2011 at 0:52
- The interesting question is why the non jQuery version doesn't cause an infinite loop – Raynos Commented Dec 5, 2011 at 1:15
- 1 aspiringcraftsman./2008/01/03/art-of-separation-of-concerns – Incognito Commented Dec 5, 2011 at 1:30
- 1 @Raynos — HTML5 isn't a standard, much of it documents existing behaviour without saying that's what it's doing. The relevant standard (DOM 3 Core) doesn't say what should happen. However, given that the default behaviour of cloneNode is to not re-execute script elements (even though it clones them), then jQuery shouldn't do it either, even if the cloning script is inside the cloned element (I don't know why jQuery does it but it certainly isn't expected or designed behaviour). – RobG Commented Dec 5, 2011 at 2:48
2 Answers
Reset to default 7Because you're cloning a div that has inside of it a script that says to clone all divs. The original div's script that says to clone all divs is cloned too, and so on, ad infinitum
Of course you could do:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$('div').clone().appendTo('body');
});
</script>
<div>
Safe Now
</div>
It's an infinite loop. You're cloning a div which contains a script that clones 2 divs that have a script that clone 4...