javascript - 将数据加载到控件中时，JQuery 和文档就绪会重复触发

Question

出于某种原因，自从我将加载函数添加到文档就绪中的控件(意味着当当前文档已加载)。

这些是我在 head 标签中使用的脚本，这些脚本包含在所有页面中(加载到另一个页面的页面将具有相同的脚本，我怀疑这就是导致问题的原因):

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="scripts/mainscript.js"></script>

mainscript.js代码:

var counter = 1;
var hasLoaded = false;
$(document).ready(function () {

if (!hasLoaded) {
    hasLoaded = true;
    if ($('.next-page').attr("data-loaded") == "false") {

        console.log(counter + ") STARTED LOADING!");
        $(this).attr("data-loaded", "true");
        $('.next-page').load($('.next-page').attr("data-link"), function () {
            counter++;
            $(this).attr("data-loaded", "true");
            console.log(counter + ") FINISHED LOADING!");
        });

    }
}

$('.tbDropDownBig li').click(function (e) {
    $(this).parent().parent().find('input').val($(this).text());
    $(this).parent().fadeOut(100);
});

});

上面 console.log 命令的输出:

1) STARTED LOADING! 2) FINISHED LOADING! 1) STARTED LOADING! 2) FINISHED LOADING! 2) FINISHED LOADING!

检测问题的方向: 加载到“下一页”的页面在加载时运行与文档加载相同的脚本(因为所有页面都有此脚本)。

因此它会再次加载数据。这就是为什么我放置了 data-loaded 属性，但它没有帮助。

Answer 1

通过停止使用“ready”来解决，而是将“load”事件绑定(bind)到窗口，如下所示:

function LoadNextPage() {
    if (!hasLoaded) {
        $('.next-page').load($('.next-page').attr("data-link"), function () {
            $(this).attr("data-loaded", "true");
            hasLoaded = true;
        });
    }
}

$(window).bind("load", function() {
    LoadNextPage();
});