In jQuery 1.4, if an html string (local or obtained through $.get()) contains scripts, and the length of the string is > 511, then the scripts do not fire when the html is appended to the DOM. Confirmed this on webkit engines on Safari 4.0.4, Chrome 3.0 and iPhone OS 3.1.2. Works fine on FF 3.6.
Works fine with jQuery 1.3.2. I suspect some of the optimization to be the culprit. This is specially troublesome for ajax content that has *mixed* script and html. Is there a suggested alternative?
Test code:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
html1 = "<div> this is html1 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 </div><script type='text/javascript'>alert('html1');</scr"+"ipt>";
html2 = "<div> this is html2 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 X</div><script type='text/javascript'>alert('html2');</scr"+"ipt>";
$(html1).appendTo(document.body);
$(html2).appendTo(document.body);
console.log('html1', html1.length);
console.log('html2', html2.length);
});
</script>
</head>
<body>
<h2>jQuery 1.4 $(html) script test</h2>
<h4>scripts don't get executed if length of html content is not < 512!!
</h4>
</body>
</html>
Console:
html1 511
html2 512
only alert('html1') fires.