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

IT技术 javascript jquery jquery-events document-ready
2021-01-29 19:26:30

我一直在网上筛选，试图找出这里发生了什么，但我没有得到具体的答案。

$(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 函数所在的位置）

6个回答

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

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

此处的问题最终是页面中包含的 IFRAME 标记。删除 document.ready 后只触发一次。如您所见，标签导致页面重新加载的原因很明显 <iframe id="pathIframe" frameborder="0" height="600" width="100%" name="path" scrolling ="自动" src="#"></iframe>
2021-03-22 19:26:30
避免使用src="#"属性，因为它在父窗口和 iframe 内部加载相同的页面，这就是为什么看起来代码被调用了两次。删除src属性或将其设置为"about:blank"以避免此类行为。
2021-03-23 19:26:30
我的网站上根本没有使用 .wrapInner() 标签，据我所知，我的网站的 <head></head> 标签中包含所有脚本标签，所以我没有看看代码如何“重新运行”？
2021-04-02 19:26:30
是的，为什么它没有发生在 IE 中我不知道，虽然这个答案不是 100% 正确，但它引导我尝试查找页面是否以使其加载两次的方式操纵 BODY，所以它让我走上了解决问题的正确道路。
2021-04-05 19:26:30
updateBannerLink 在哪里被调用？如果它在锚标记中，您是否阻止锚标记重新加载页面？
2021-04-12 19:26:30

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

我在 Laravel 布局和动态页面中都包含了相同的脚本。删除动态 php 文件中的包含为我解决了这个问题。
2021-03-25 19:26:30
是的，同样的问题发生在我身上，不小心包含了相同的脚本两次。
2021-04-01 19:26:30
谢谢你提到这一点。这很明显，但你的回答让我仔细检查了我的包含，这解决了问题;)
2021-04-11 19:26:30
在 asp.net mvc 中，我错过了一个包，其中包含一个文件夹的所有 js，我为单个文件创建了一个，导致 2 个包含同一文件
2021-04-13 19:26:30

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

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

这有点像hack-ish，但它有效。

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

好决定！我从另一个主脚本的 $.getScript 调用了我的脚本。但是我忘了我添加了一个 <script> 标签来调试！
2021-04-06 19:26:30

你可以考虑使用 

window.onload

代替 

$(document).ready
只想说这对我有用。使用谷歌地图，不知何故我的东西发射了两次，但 window.onload 而不是 document.ready 为我工作，所以谢谢。
2021-03-25 19:26:30
其它你可能感兴趣的问题
上一篇如何让 event.srcElement 在 Firefox 中工作，它是什么意思？ 下一篇如何从 onclick div 属性检测 Javascript 中的 control+click？