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

Question

*我知道以前使用Ajax和其他方法解决了这个问题,但没有任何内容符合我的需求.

我正在制作一个bootstrap管理主题,我正在使用jQuery的.load()来避免页面刷新和更平滑的事务,尽管它没有加载位于页面底部的脚本... /脚本,它被忽略了.

我不能为每个脚本创建一个新文件并特别加载它,因为这意味着使用我的主题的任何人都会对用于表的最小脚本等等(当它们可以简单地放在脚本标签内时)),因此它不是一个可用的模板.

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

文档明确提到了这一点:

但是,如果.load()使用附加到URL的选择器表达式调用,则在更新DOM之前会删除脚本,因此不会执行脚本.

这个主题似乎有答案 - 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);
});

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