Question

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

我正在制作一个bootstrap管理主题，我正在使用 jQuery的.load（）来避免页面刷新并使事务更顺畅，尽管它没有加载脚本。。/ 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明确提到了这一点：

如果使用附加到URL的选择器表达式调用.load()，则在更新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);
});

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

如何使用脚本标记jQuery .load（）

1 个答案: