jQuery / Javascript：AJAX请求引入的HTML不包括<script> elements

Question

I have a dynamic page which uses an AJAX request kicked off by jQuery to pull in HTML elements from the server and insert them into the DOM.

The problem is that when I have elements within the response, they are stripped out.

For instance, if I request the following from the server:

<!-- content.html -->
<div>
    There is some content here!
    <script>
        manipulateContent();
    </script>
</div>

What actually gets injected into my dynamic page is the following:

<!-- content.html -->
<div>
    There is some content here!
</div>

I have tested in Chrome, Firefox, and Safari with identical results.

The relevant Javascript which creates the AJAX request is here:

function loadContent(url){
    var a = document.createElement('a');
    a.href = url;
    if (a.search == ""){ 
        url = url + "?trim=true";
    } else {
        url = url + "&trim=true";
    }

    var ch = $('#content-container').height();
    // var wh = $(window).height();

    $("#content").animate({top: '-='+ch+'px'}, 500, function(){
        $.get(url, function(data){
            $("body").scrollTop(0);
            $("#content").html(data);
            $("#content").css({top: ch+'px'});
            $("#content").animate({top: '0px'}, 500);
        });
    });
}

$(document).ready(function(){

    // get the current path and save it for later
    var currentPage = location.pathname+location.search;

    $(".content-link").live("click", function(){
        // using the HTML5 history API, add the requested path
        // to the browser history, then load the new content
        history.pushState({ path: this.path }, '', this.href);
            // because the page is not reloaded, $(document).ready()
            // is not called, so the currentPath must be updated manually
                currentPage = this.href;
        loadContent(currentPage);

        return false;

    });

    window.addEventListener('popstate', function() {
        // compare the current path to the one being loaded
        // if they are different, then load the content
        // else, nothing happens
        if (currentPage != location.pathname+location.search){
            // because the page is not reloaded, $(document).ready()
            // is not called, so the currentPath must be updated manually
            currentPage = location.pathname+location.search;
            loadContent(currentPage);
        }
    });

});

How can I tell jQuery to include the tags in the response? I've tried browsing through the jQuery docs without much luck, or even mention of the fact that the tags are stripped out. Perhaps I'm just not looking in the right places.

Answer 1

You need to use load , since the whole purpose here is to load hml content to a element.

function loadContent(url) {
    var a = document.createElement('a');
    a.href = url;
    if (a.search == "") {
        url = url + "?trim=true";
    } else {
        url = url + "&trim=true";
    }

    var ch = $('#content-container').height();
    // var wh = $(window).height();

    $("#content").animate({
        top : '-=' + ch + 'px'
    }, 500, function() {
        $("#content").load(url, function() {
            $("body").scrollTop(0);
            $("#content").css({
                top : ch + 'px'
            });
            $("#content").animate({
                top : '0px'
            }, 500);
        });
    });
}

Answer 2

According to jQuery documentation ( http://api.jquery.com/jQuery.ajax/ ) if dataType option is html :

Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.

By default this option is set to Intelligent Guess , so you may want to check the type of response from the server.