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

Xen*_*ogy 68 javascript jquery javascript-events document-ready

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

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

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

$(document).ready(function() {
    try{    
        console.log('ready');
        }
    catch(e){
        console.log(e);
    }
});
Run Code Online (Sandbox Code Playgroud)

在控制台中,我看到的是"准备好"两次记录.是否有可能另外一个有例外的问题会引起问题?我的理解是,所有.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>
Run Code Online (Sandbox Code Playgroud)

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

use*_*654 64

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

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

  • 此处的问题最终成为页面上包含的IFRAME标记.删除document.ready时只触发一次.如你所见,有一个明显的原因,为什么标签导致页面上的重新加载<iframe id ="pathIframe"frameborder ="0"height ="600"width ="100%"name ="path"scrolling ="auto"src ="#"></iframe> </ iframe> (9认同)
  • 避免使用`src ="#"`属性,因为它在父窗口和内部iframe中加载相同的页面,这就是为什么看起来代码被调用两次.删除`src`属性或将其设置为`"about:blank"`以避免此类行为. (7认同)

Cha*_*IER 38

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


qJa*_*ake 33

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

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

它有点像hack-ish,但它确实有效.


小智 13

确保两次不包含JS文件.那是我的情况