jQuery $(document).ready()触发两次

时间:2012-05-23 20:01:33

标签: javascript jquery javascript-events document-ready

所以我一直在网上搜索,试图找出这里发生的事情,我无法得到具体的答案。

我的网站上有一个$(document).ready,无论内部代码是什么,都会连接多次运行。

我已经阅读了jQuery的bug报告,了解如果你的语句中发生异常,.ready事件将如何触发两次。但即使我有以下代码,它仍会运行两次:

$(document).ready(function() {
    try{    
        console.log('ready');
        }
    catch(e){
        console.log(e);
    }
});

在控制台中我看到的所有内容都已“准备好”记录两次。是否有可能另外一个有例外的问题会引起问题?我的理解是所有.ready标签都是相互独立的,但我似乎无法找到它的起源?

以下是该网站的主要栏目:

<head>
<title>${path.title}</title>
<meta name="Description" content="${path.description}" />
<link href="${cssHost}${path.pathCss}" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" charset="utf-8"><!----></script>
<script src="media/js/fancybox/jquery.fancybox.pack.js" type="text/javascript" ><!-- --></script>
<script src="/media/es/jobsite/js/landing.js" type="text/javascript" ><!-- --></script>
<script src="/media/es/jobsite/js/functions.js" type="text/javascript"><!-- -->    </script>
<script src="/media/es/jobsite/js/jobParsing.js" type="text/javascript" charset="utf-8"><!----></script>
<script src="/media/es/jobsite/js/queryNormilization.js" type="text/javascript" charset="utf-8"><!----></script>
<script src="${jsHost}/js/jquery/jquery.metadata.js" type="text/javascript" charset="utf-8"><!----></script>
<script src="${jsHost}/js/jquery/jquery.form.js" type="text/javascript" charset="utf-8"><!----></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/javascript" charset="utf-8"><!----></script>
<script src="${jsHost}/js/jquery.i18n.properties-min.js" type="text/javascript" charset="utf-8"><!----></script>

<script type="text/javascript" charset="utf-8">

function updateBannerLink() {
    var s4 = location.hash.substring(1);
    $("#banner").attr('href','http://INTELATRACKING.ORG/?a=12240&amp;c=29258&amp;s4='+s4+'&amp;s5=^');
}

</script>
</head>

不要关注JSP变量,但是你可以看到我只调用了functions.js文件一次(这是.ready函数存在的地方)

13 个答案:

答案 0 :(得分:61)

ready事件无法触发两次。更可能发生的是你有代码移动或操纵包含代码的元素,导致浏览器重新执行脚本块。

可以通过在<head>中或在结束</body>标记之前添加脚本标记并使用$('body').wrapInner(); 而不是来避免这种情况。使用$('body').html($('body').html().replace(...));具有相同的效果。

答案 1 :(得分:36)

它也发生在我身上,但我意识到由于合并不好,脚本已被包含两次。

答案 2 :(得分:31)

使用KendoUI时发生这种情况...调用弹出窗口会导致document.ready事件多次触发。简单的解决方案是设置一个全局标志,使其只运行一次:

var pageInitialized = false;
$(function()
{
    if(pageInitialized) return;
    pageInitialized = true;
    // Put your init logic here.
});

它有点像黑客,但它确实有效。

答案 3 :(得分:11)

确保您没有包含两次JS文件。那是我的情况

答案 4 :(得分:2)

尝试将它放在你的functions.js中以防止它被执行两次:

var checkit = window.check_var;
if(checkit === undefined){ //file never entered. the global var was not set.
    window.check_var = 1;
}
else {
    //your functions.js content 
}

但是我建议你多看一下,看看你第二次在哪里打电话。

答案 5 :(得分:2)

您可以考虑使用

window.onload

而不是

$(document).ready

答案 6 :(得分:1)

当我尝试刷新部分时,我遇到了类似的问题。我调用了一个返回ActionResult而不是返回PartialViewResult。 ActionResult导致我的ready()运行两次。

答案 7 :(得分:1)

当您在html中添加两次相同的控制器时,可能会遇到此问题。
例如:
[JS]

app.controller('AppCtrl', function ($scope) {
 $(document).ready(function () {
        alert("Hello");
        //this will call twice 
    });
});

[HTML]

//controller mentioned for the first time
<md-content ng-controller="AppCtrl">
    //some thing
</md-content>

//same controller mentioned again 
<md-content ng-controller="AppCtrl">
    //some thing
</md-content>

答案 8 :(得分:1)

今天我遇到了类似的问题。在我的情况下,<button type="submit">导致$(document).ready(...)事件再次触发。将代码更改为<button type="button">可以解决我的问题。

有关详细信息,请参阅stackoverflow上的document.ready function called again after submit button?

答案 9 :(得分:0)

在我的情况下,$(document).ready因为CSS不好而被解雇两次,请检查CSS的任何部分是否有background-image: url('');

答案 10 :(得分:0)

如果iframe没有显示任何内容并且由于其他原因(例如上传文件而不重新加载)而使用,则可以执行以下操作:

<iframe id="upload_target" name="upload_target" style="width:0;height:0;border:0px solid #fff;"></iframe>

请注意,未包含src会阻止文档上的第二个就绪触发器。

答案 11 :(得分:0)

我有这个问题,window.load函数执行了两次: 原因是因为我在主页面中引用了相同的javascript文件以及.net usercontrol。当我在主页面中删除引用时,load-function只执行一次。

答案 12 :(得分:0)

今天早上我发生了这件事……在我仔细检查了我最近处理过的以jQuery模态形式编写的html代码后,发现了我不小心删除了一个关闭表标签的发现。我还没有花时间完全理解为什么这会导致 document.ready函数被调用两次,但是确实如此。添加结束表标记可解决此问题。

jQuery JavaScript Library v1.8.3(是的,它是旧版应用程序)