document.ready 函数被一遍又一遍地调用

我有一个没有页面更改的html网站。它只是使用 ajax 调用将不同的元素加载到页面上的每个位置。我需要我的登录函数在第一次加载页面后运行（因为它需要索引上的元素存在），但是当我使用 $（document）.ready（login）时，每次加载元素时都会触发（因为它将元素加载到页面上，它卡在无限循环中）。除了将其放在索引页的底部（看起来很脆弱）之外，有没有办法让它在索引页加载完成后加载，但不让它在每次 ajax 请求向页面添加内容时运行？

我的登录函数如下所示：

function login ()
{
    if($.cookie('employee'))
        employee = $.cookie('employee');
    if(employee && !employee.login)
        $("div.middle").load('login.html');
    else
            $("div.middle").load('main.html');
}
function logout ()
{
    //FIXME send a logout request to server to end session also
    employee = null;
    $.cookie('employee', null);
    $("div.middle").load('login.html'); 
}

我的初始就绪函数如下所示：全局变量var 员工 = 新对象;

$(document).ready(function(){
        $("div.leftColumn").html(buildLeftNav());
        //set height of middle if height of leftColumn is less than height of middle
        if($("div.leftColumn").css('height') < $("div.middle").css('height'))
            $("div.center").css('height' , $('div.middle').css('height'));


        //handle login and logout
        $.cookie.json = true;
        login();

    });

我设置了一个小提琴来说明：http://jsfiddle.net/uZVP4/

您的问题可能不在于document.ready，而在于您可能在 AJAX 调用中一遍又一遍地加载相同的脚本。由于脚本会自动加载新内容，因此它正在创建一个加载新内容的无限循环，从而导致新内容再次加载。一遍又一遍。

如果必须将脚本保留在远程页面中，则可以使用不会在 ajax 内容中执行脚本$.get

通常每页只调用一次$(document).ready()。

如果你想要一个"黑客"的解决方案，你可以设置一个变量

var wasReady = false;

并在$(document).ready()将该值设置为 true 如果它是false，否则什么都不做。

$(document).ready(function(){
if(!wasReady)
 wasReady = true;
else return;
...
}

我通常使用

$(function(){
 /* code here */
});

这与文档就绪相同，但是如果您想在所有页面加载（包括图像）后执行JavaScript，请使用

$(window).load(function(){ 
 /*code here */
});

通过使用".one"为我们"解决"

了这个问题

$(document).one("ready", function () {
   // code
});

您应该尝试将其放入 body 标签的加载中，仅在每次提交表单时将其放在这里。

....
<body onload="login()">
....

相关内容

最新更新

热门标签：