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.

Solution 1:

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 || '');
        });
    }
});

Solution 2:

As alternative to @James answer, the HTML string can be parsed with $.parseHTML(), by paying attention to add the boolean flag that includes the scripts to true:

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

        var content = $($.parseHTML(data, document, true)).find('#something');
        $('#mydiv').html(content);

    }
});

in this way any scripts embedded in the downloaded text can be executed.

Solution 3:

I'm not totally sure about this, but it's possible that what's happening is that when jQuery builds up the fragment from $(data), the script tags are lost at that point.

If you can arrange for the included page to really be just a fragment:

<div id='something'>
  <!-- ... -->
  <script>var x = 'hello world';</script>
</div>

without any other surrounding stuff, then your success callback can do this:

success: function(data) {
  $('#mydiv').html(data);
}

Now those script tags will be noticed by the jQuery html() function, which explicitly looks for them and strips them out. It does however hold onto those script blocks, and it executes them after it finishes updating the target contents.

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

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts