javascript - 如何使用脚本标签进行 jQuery .load()

Question

*我知道以前使用 Ajax 和其他方法回答过这个问题，但没有任何符合我的需求。

我正在制作一个 Bootstrap 管理主题，我正在使用 jQuery 的 .load() 来避免页面刷新并使交易更顺畅，尽管它不会加载 脚本 .. ./script 位于页面底部，它会被忽略。

我无法为每个脚本创建一个新文件并特别加载它，因为这意味着任何使用我的主题的人，对于用于表格等的最小脚本都必须相同(当它们可以简单地放在 script 标签)，因此它不是可用的模板。

我的 jQuery 加载代码:

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

我的 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>

Answer 1

The documentation明确提到这一点:

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似乎有答案 - 使用 get相反:

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

这也会更有效率，因为您只对新页面发出一个请求，而不是当前脚本发出的三个请求。