jQuery $ {document）.ready（）触发两次

73

我一直在网上浏览，试图找出这里发生的事情，但我还没有得到具体的答案。

$(document).ready我的网站上有一个缝可以运行多次，而不管其中的代码如何。

我已经阅读了有关jQuery的错误报告，内容涉及.ready如果语句中发生异常，事件将如何触发两次。但是，即使我有以下代码，它仍然运行两次：

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

在控制台中，我看到的只是两次“就绪”记录。另一个带有异常的.ready是否有可能引起问题？我的理解是，所有.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函数所在的位置）

javascript  jquery  jquery-events  document-ready 
— Xenology
source
2
是导致页面刷新或第二页面加载的某种东西-诸如Firebug之类的调试工具吗？
— Dylan Beattie
1
对我来说只记录一次。
— 艾略特·邦纳维尔
您能否提供有关所使用的jQuery版本以及正在使用的浏览器的任何信息？
— 维克多
1
我猜想相同的代码会被嵌入两次。当DOM准备就绪时，将触发DOM ready事件，只需将ready处理程序绑定到该事件即可。如果绑定两次，它将执行两次。可能是您应该检查所有JavaScript，以查看此代码是否在其他地方重复，或者您可能只是将控制台日志留在了其他一些正在执行其他代码的处理程序中，但您只是留下了控制台日志。
— Alok Swain
@ngen-当然是jsfiddle.net/alokswain/xNEtg ..发生的原因是因为我们只听事件并且可以听我们想要的多次，这只是对单个事件进行多次绑定的简单情况：文档准备就绪，将触发一次。
— Alok Swain'5

Answers:

66

就绪事件不能触发两次。更有可能发生的事情是，您有一些代码正在移动或操纵代码所包含的元素，从而导致浏览器重新执行脚本块。

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

— 凯文·B
source
我在网站上根本没有使用过.wrapInner（）标记，据我所知，我的网站<head> </ head>标记中都包含所有脚本标记，所以我没有看看代码如何“重新运行”？
— Xenology 2012年
在哪里调用updateBannerLink？如果它在锚标记中，是否要阻止锚标记重新加载页面？
— 凯文B'5
其实这是一个愚蠢的问题。没关系。如果发生两次却没有您的任何交互，那么如果代码位于<head>
— Kevin B
10
最终导致的问题是页面上包含的IFRAME标签。删除文档后，仅触发一次。如您所见，有一个很明显的原因说明代码为什么导致页面重新加载<iframe id =“ pathIframe” frameborder =“ 0” height =“ 600” width =“ 100％” name =“ path”滚动=“ auto” src =“＃”> </ iframe>
— Xenology 2012年
8
避免使用src="#"属性，因为它会在父窗口和iframe中加载相同的页面，这就是为什么它看起来像两次调用代码的原因。删除src属性或将其设置"about:blank"为避免此类行为。
— Inferpse
41

这也发生在我身上，但我意识到由于合并错误，该脚本已被包含两次。

— 查尔斯·海蒂尔
source
在asp.net mvc中，我想念我有一个包含文件夹中所有js的文件包，我为单个文件又创建了一个文件包，导致2个文件包含了同一文件
— Darion Badlydone 2015年
我在laravel布局和动态页面中都包含了相同的脚本。删除动态php文件中包含的内容为我解决了这个问题。
— Prasanna Kumar，
感谢您提到这一点。这很明显，但是您的回答使我
— 再次
是的，我遇到了同样的问题，意外地两次包含了相同的脚本。
— RKM
34

使用KendoUI时，这发生在我身上...调用弹出窗口将导致document.ready事件多次触发。一种简单的解决方案是设置一个全局标志，使其仅运行一次：

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

这有点像黑客，但可以。

— 杰克
source
14

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

— 卡考曼德
source
好决定！我从另一个主脚本的$ .getScript调用了脚本。但是我忘了我添加了<script>标记进行调试！
— 杰夫
3

您可能会考虑使用 

window.onload

代替 

$(document).ready
— v
source
1
只是想说这对我有用。使用谷歌地图，我的东西以某种方式被触发了两次，但是window.onload而不是document.ready为我工作，所以谢谢。
— balslev 2015年
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 
}

但是我建议您更多地研究它，看看您第二次打电话到哪里。

— 穆纳·奇克纳
source
我想避免这种混乱的事情，而且我不喜欢必须一起破解此功能的想法。虽然这可能是我，如果我不明白这一点，唯一的解决办法
— Xenology
只是想在这里添加，尽管这很hacky，但这也是不正确的。语法应更改为“ if（typeof checkit ==='undefined'）”。Typeof总是返回一个字符串。
— Zach Pedigo
1

当我尝试刷新部分内容时，我遇到了类似的问题。我叫返回ActionResult而不是返回PartialViewResult。ActionResult使我的ready（）运行两次。

— 用户名
source
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>
— Charitha Goonewardena
source
0

在我的情况下，$（document）.ready由于CSS错误而触发了两次，请检查CSS的任何部分是否具有 background-image: url('');

— osis
source
CSS不会影响事件。
— Hexodus
0

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

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

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

— 亚历克斯·西卡米奥蒂斯（Alex Sikamiotis）
source
0

我对window.load函数有两次执行此问题的原因：原因是因为我引用了主页中的同一javascript文件以及.net用户控件。当我在主页上删除引用时，加载功能仅执行一次。

— 埃吉尔·莫顿·埃里克森
source
0

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

jQuery JavaScript Library v1.8.3（是的，它是旧版应用程序）

— 用户名
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.