如何使用脚本标签使用 jQuery .load()

Question

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

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

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

我的 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 明确提到了这一点：

但是，如果调用.load() 时将选择器表达式附加到 URL，则脚本会在 DOM 更新之前被剥离，因此不会执行。

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

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