how to jQuery .load() with script tags

问题

*I know this was answered previously using Ajax and other methods, but nothing corresponds to my needs.

I'm making a bootstrap admin theme and I'm using jQuery's .load() to avoid page refresh and have smoother transactions, though it doesn't load the script ... /script that is at the bottom of the page, it gets ignored.

I can't create a new file for each script and load it particularly, because this would mean anyone using my theme, would have to the same for the smallest scripts used for tables and so on (when they could simply be placed inside script tags), therefore it wouldn't be an usable template.

My jQuery load code:

$('.navigation .nav li a').not('.nav-item-expandable > a').click(function(navActive){
            var href = $(this).attr('href');

            navActive.preventDefault();
            $('.content').load('/' + href + ' .content>*');
            $('.breadcrumb').load('/' + href + ' .navbar .breadcrumb>*').delay(200).queue(function(){
                breadcrumb();
                $(this).dequeue();
                });
            $('#scripts').load('/' + href + ' #scripts>*')

            history.pushState('', '', href);
        });

Lower part of my html:

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

<div id="scripts">
        <!-- Addons scripts -->
        <script src="jquery.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
        <script src="addons/bootstrap/js/bootstrap.min.js"></script>
        <script src="addons/toastr/toastr.min.js"></script>
        <script src="addons/history.js/bundled/html4+html5/jquery.history.js"></script>

        <!-- theme scripts -->
        <script src="addons/theme.js"></script>

        <script language="javascript" type="text/javascript">
                // Icons show page
                $("body .show-icons li").each(function(){
                    $(this).append("<a>" + $(this).attr("class") + "</a>");
                });

        </script>
    </div>

回答1:

The documentation explicitly mentions this:

If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.

This thread seems to have the answer - use get instead:

$('.navigation .nav li a').not('.nav-item-expandable > a').click(function(navActive){
    var href = $(this).attr('href');

    navActive.preventDefault();
    $.get('/' + href, function(html){
        var doc = $(html);
        $('.content').empty().append(doc.find('.content > *'));
        $('.breadcrumb').empty().append(doc.find('.navbar .breadcrumb > *'));
        $('#scripts').empty().append(doc.find('#scripts > *'));
        setTimeout(function(){ breadcrumb(); }, 200);
    });

    history.pushState('', '', href);
});

That will also be more efficient, since you're only making one request for the new page, rather than the three that your current script issues.

来源：https://stackoverflow.com/questions/39276049/how-to-jquery-load-with-script-tags

标签

javascript

jquery

html

ajax

twitter-bootstrap