Jose Jose Jose Jose - 4 months ago 8
jQuery Question

jQuery - script tags in the HTML are parsed out by jQuery and not executed

I have an HTML page like so:

<html>
<body>
<div id='something'>
...
<script>
var x = 'hello world';
</script>
...
</div>
</body>
</html>


On another page, I am doing this:

$.ajax({
url: 'example.html',
type: 'GET',
success: function(data) {
$('#mydiv').html($(data).find('#something').html());
alert(x);
}
});


jQuery, however, is not executing the javascript in the first file, even though the documentation says it does. How can I make it do that?

EDIT: Unfortunately in the real world application I am working on I don't have control over what the "included" page has. We are on the same domain, but I can't modify the code that it outputs as it is a packaged product our IT department will not let us modify.

Answer

As Pointy pointed out (excuse the pun), jQuery messes with the SCRIPT tags when you pass HTML to $(). It doesn't remove them though -- it simply adds them to the DOM collection produced from your HTML. You can execute the scripts like so:

$.ajax({
    url: 'example.html',
    type: 'GET',
    success: function(data) {

        var dom = $(data); 
        $('#mydiv').html(dom.find('#something').html());
        dom.filter('script').each(function(){
            $.globalEval(this.text || this.textContent || this.innerHTML || '');
        });
    }
});