Question

我的索引页面中有这个代码，除了#content中的内容外，其他页面几乎相同：

$(document).ready(function() {
    $('.nav-menu li a').each(function() {

        $(this).on('click', function() {
            var thisAttr = $(this).attr('href');

            function doAjax() {
                $.ajax({
                    url: thisAttr,
                    success: function(responseHtml) {

                        $('#content').html($(responseHtml).filter('#content').html());
                        var newTitle = $(responseHtml).filter('title').text();
                        document.title = newTitle;
                    },
                    error: function() {
                        alert('error!!');
                    }
                });
            }

            $('#content').addClass('out');
            setTimeout(doAjax, 1000);
            setTimeout(function() {
                $('#content').removeClass('out');
            }, 1000);

            return false;


        })

    })

});

在我的ajax.js中，我有这个代码通过ajax调用其他页面：

<script type="text/javascript" src="assets/js/custom.js"></script>
     <script type="text/javascript" src="assets/js/test.js"></script>

一切正常。 Ajax请求按计划进行，但这些脚本{{1}}中的代码根本不起作用。我的困惑是：为什么他们不会工作，因为他们还在源页面上？我已经尝试了包括Eval（）在内的所有内容，但没有成功！我有什么不对的吗？

Answer 1

您的基本问题是，$(document).ready(XYZ);只会调用XYZ一次 - 主页加载时。当您从ajax内部更改页面时，它将不再被调用。因此，每次ajax内容执行更改后，您需要再次调用$(document).ready调用的函数。

这是一种（非常快速和肮脏）的方式......（注意：未经测试！）

首先，在两个脚本块之间添加一行，如下所示：

<script type="text/javascript" src="assets/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>

<script type="text/javascript">var updateCallbackCollector=[];</script>    

<script type="text/javascript" src="assets/js/custom.js"></script>
<script type="text/javascript" src="assets/js/test.js"></script>
<script type="text/javascript" src="assets/js/ajax.js"></script>

然后，将$(document).ready(XYZ);的所有实例替换为自定义脚本中的updateCallbackCollector.push(XYZ);，但ajax.js文件除外。

然后，像这样更改ajax.js：

$(document).ready(function() {

    /////////// new stuff starts here ///////////
    for(var callback in updateCallbackCollector) {
        updateCallbackCollector[index]();
    }
    /////////// new stuff ends here ///////////

    $('.nav-menu li a').each(function() {

        $(this).on('click', function() {
            var thisAttr = $(this).attr('href');

            function doAjax() {
                $.ajax({
                    url: thisAttr,
                    success: function(responseHtml) {

                        $('#content').html($(responseHtml).filter('#content').html());
                        var newTitle = $(responseHtml).filter('title').text();
                        document.title = newTitle;

                        /////////// new stuff starts here ///////////
                        for(var index in updateCallbackCollector) {
                            updateCallbackCollector[index]();
                        }
                        /////////// new stuff ends here ///////////
                    },
                    error: function() {
                        alert('error!!');
                    }
                });
            }

            $('#content').addClass('out');
            setTimeout(doAjax, 1000);
            setTimeout(function() {
                $('#content').removeClass('out');
            }, 1000);

            return false;


        })

    })

});

Answer 2

我在最后3天寻找这个问题的答案。所有可能的变体都不适用于外部脚本链接。但是我找到了一种方法来使它工作。我想分享这个解决方案，也许这对将来遇到同样问题的人有用：

//Using scripts inserted through text editor
if ($('#page-main-content')) {
    $('#page-main-content').find("script").each(function (i) {

        var src = $(this).attr("src");      
        if (src != "undefined" && src != "") {

            //In case if we have external script
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = src;
            var charset = $(this).attr("charset");
            if (charset != "undefined" && charset != "") {
                script.charset = charset;
            }
            var divName = "div" + $.now();
            $(this).after('<div id="' + divName + '"></div>');

            //Remove initial script
            $(this).remove();

            var myDiv = document.getElementById(divName);
            myDiv.appendChild(script);

        } else {
            //In case if we have internal local script
            eval(document.getElementById("page-main-content").innerHTML);
        }
    });
}

请注意一件重要的事情（我不知道为什么会这样）：如果您更换线路：

var myDiv = document.getElementById(divName);
myDiv.appendChild(script);

使用jQuery：

var myDiv = $('#' + divName);
myDiv.appendChild(script);

脚本链接将被插入到div标签中，但是脚本将不会运行...所以，请使用本机javascript函数document.getElementById，如上面第一个代码示例中所述。

在我的一切都很好。您可以使用此功能查看工作网站的链接：http://aikiclub.com.ua/。

为什么我的外部Javascripts在Ajax调用之后没有运行？

2 个答案: