[removed] not returned in AJAX

Question

I am creating a WordPress theme and using AJAX to load new archive pages. The problem is that the whole < script type="text/javascript">//something//< /script> is not returned in the newly-acquired content.

Suppose I have these codes initially :

<div id="post-1">
    <script type="text/javascript">
    //some codes here//
    </script>

    <div class="content">
    </div>
</div>

After navigating to the next page and back to this original page using AJAX, I will get these (in Firebug) instead :

<div id="post-1">
    <div class="content">
    </div>
</div>

The whole chunk of Javascript codes will not be returned, but under the 'Inline' script in 'Script' tab of Firebug, they are still there.

So, I'm wondering what have I done wrong in retrieving the new content using AJAX? Below is the code that I'm using :

    jQuery('.ajax-pagination a').live('click', function(e){ //check when pagination link is clicked and stop its action.
    e.preventDefault();
    var link = jQuery(this).attr('href'); //Get the href attribute
    jQuery.ajax({
        url: link,
        dataType: "text",
        context: document.body,
        beforeSend: function(){jQuery('#container').fadeOut(500)},
        success: function(html) {
            var newhtml = $('#container', $(html))
            $('#container').html(newhtml);
            $("container").find("script").each(function(i) {
                eval($(this).text());
            });
            jQuery('#container').fadeIn(500);

        },
        error: function() {
            alert('Error');
        }
    });
    });

I am trying to run the Javacript loaded via AJAX, but the problem seems to be that the Javascript itself isn't even returned together with the rest of the content.

Thanks for reading such a long question and I really appreciate your help!

Answer 1

The .html() method strips <script> tags from inserted HTML.

You'll need to traverse the HTML before you try to insert it to find all of the script tags and then use jQuery.globalEval to execute their contents.

success: function(html) {
    var newhtml = $('#container', $(html));

    // execute included script tags - assumes inline for now
    $('script', newhtml).each(function() {
        $.globalEval($(this).text());
    });

    $('#container').html(newhtml).fadeIn(500);
}