繁体   English   中英

jQuery 代码触发两次

[英]jQuery code firing twice

我不知道为什么以及如何,但我的 jQuery 代码似乎在任何事件上都会触发两次。

这是我的代码的一部分:

commmon.js

$(document).ready(function() {

    $(".fpbtn-one").click(function() {
        console.log("Click recorded!"); // Gets logged twice on click
        $(this).parent().next().slideToggle();
    });

    // The rest of the code...

});

$(window).load(function() {

    console.log("Setting up slides"); // Gets logged 2 on page load

    // These get initialized twice
    $("#div-1").responsiveSlides({
        auto: true,
        pager: true,
        pause:true,
        nav: false,
        timeout: 3000,
        speed: 500,
        maxwidth: 482,
        namespace: "transparent-btns"
    });

    $("#div-2").responsiveSlides({
        auto: true,
        pager: false,
        pause:true,
        nav: false,
        speed: 2000,
        maxwidth: 320,
    });

});

HTML:

<!doctype html>
<html lang="en">
<head><link href="/assets/css/jquery.qtip.css" rel="stylesheet" type="text/css" />
<link href="/assets/custom/themes/1st-formation-theme/theme.css" rel="stylesheet" type="text/css"/>
<link href="/assets/css/efControl.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="/assets/script/jquery/jquery.qtip.js"></script>
<script type="text/javascript" src="/assets/script/jquery/plugin.efiling.full.js"></script>

<meta charset="utf-8" /><script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function a(b,c,d){function e(f){if(!c[f]){var g=c[f]={exports:{}};b[f][0].call(g.exports,function(a){var c=b[f][1][a];return e(c?c:a)},g,g.exports,a,b,c,d)}return c[f].exports}for(var f=0;f<d.length;f++)e(d[f]);return e}({"4O2Y62":[function(a,b){function c(a,b){var c=d[a];return c?c.apply(this,b):(e[a]||(e[a]=[]),void e[a].push(b))}var d={},e={};b.exports=c,c.queues=e,c.handlers=d},{}],handle:[function(a,b){b.exports=a("4O2Y62")},{}],YLUGVp:[function(a,b){function c(){var a=m.info=NREUM.info;if(a&&a.agent&&a.licenseKey&&a.applicationID){m.proto="https"===l.split(":")[0]||a.sslForHttp?"https://":"http://",g("mark",["onload",f()]);var b=i.createElement("script");b.src=m.proto+a.agent,i.body.appendChild(b)}}function d(){"complete"===i.readyState&&e()}function e(){g("mark",["domContent",f()])}function f(){return(new Date).getTime()}var g=a("handle"),h=window,i=h.document,j="addEventListener",k="attachEvent",l=(""+location).split("?")[0],m=b.exports={offset:f(),origin:l,features:[]};i[j]?(i[j]("DOMContentLoaded",e,!1),h[j]("load",c,!1)):(i[k]("onreadystatechange",d),h[k]("onload",c)),g("mark",["firstbyte",f()])},{handle:"4O2Y62"}],loader:[function(a,b){b.exports=a("YLUGVp")},{}]},{},["YLUGVp"]);</script>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />


<link href="/assets/custom/files/favicon.ico" rel="shortcut icon" />
<link href="/assets/custom/images/system/apple-touch-icon.png" rel="apple-touch-icon" />
<link href="/assets/custom/images/system/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" />
<link href="/assets/custom/images/system/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" />

<meta content="" name="description" />
<meta content="" name="keywords" />
<meta content="NOINDEX, NOFOLLOW" name="ROBOTS" />
<title>Some title</title>


<link href="/assets/custom/files/css/reset.css" rel="stylesheet" type="text/css" />
<link href="/assets/custom/files/css/base.css?=v1" rel="stylesheet" type="text/css" />
<link href="/assets/custom/files/css/font-awesome.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]>
<link rel="stylesheet" href="/assets/custom/files/css/font-awesome-ie7_min.css">
<![endif]-->
<script type="text/javascript" src="/assets/custom/files/js/adobe-type.js"></script>
</head>
<body>

<!-- BODY STUFF IN HERE (REMOVED) -->

<script type="text/javascript" src="/assets/custom/files/js/jquery-mmenu-min.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/jquery-anystretch-stand-min.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/common.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/modernizr.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/responsiveslides_min.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/socialmedia.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/jquery_atooltip_min.js"></script></div>

<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"beacon-4.newrelic.com","licenseKey":"204ccc8db2","applicationID":"1825150","transactionName":"YVNVYBACWxFTWxFcWVgZYkYLTFwMVl0dG0ZeRg==","queueTime":0,"applicationTime":187,"ttGuid":"","agentToken":"","userAttributes":"","errorBeacon":"jserror.newrelic.com","agent":"js-agent.newrelic.com\/nr-361.min.js"}</script></body>
</html>

可能是什么原因?

可能是您的代码正在操纵代码加载到的元素?

这个答案可能是它发生的原因:

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

尝试将这些东西放在 div 中的 body 中。

例子。 <div id = "menu"><script type="text/javascript" src="/assets/custom/files/js/jquery-mmenu-min.js"></script> </div>

我希望这有效。 :)

在调用 jquery 时要小心开始使用良好的实践:

!function( $ ) {
   your code

}( jQuery )

就像你避免冲突......

然后在html中添加js脚本时要小心,你可以添加两次,例如你在一个html文件中调用一个js,好的但是在你加载回调的js中,例如另一个里面有js的页面,它会调用两次你的代码....我之前在递归调用中遇到了同样的问题,js 永远不会停止调用它! 在主页中,如果您的 js 将在多个文件中调用会更好,否则您必须调试它....

此外,您不粘贴我们无法帮助您的所有代码,我们只能在我看来......通常不是一个好的建议......

可能你已经两次包含了你的脚本文件commmon.js 检查您在代码中对它的引用。

这可能是事件冒泡。 使用event.preventDefault() ,它将阻止默认事件发生或event.stopPropagation()将阻止事件冒泡。

$(document).ready(function() {

    $(".fpbtn-one").click(function(event) {
        event.stopPropagation();
        console.log("Click recorded!"); // Gets logged twice on click
        $(this).parent().next().slideToggle();
    });

    // The rest of the code...

});

最简单的解释是您错误地包含了 common.js 两次。

查看单个脚本,看看您是否在主文件顶部引用了 common.js。

您的相关代码是必需的,但来自上面的片段; 尝试将所有代码放入文档就绪方法中。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM