jQuery code firing twice
Question
I don't know why and how, but my jQuery code appears to be firing twice on any event.
Here's a part of my code:
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>
What could be the reason?
7 answers
solution1
0 2014-04-03 18:43:25
Could it be that your code was manipulating the element that the code was loading into?
This answer may be the reason why it was happening:
solution2
0 2014-06-12 10:52:39
Try putting the stuff in the body inside divs.
example. <div id = "menu"><script type="text/javascript" src="/assets/custom/files/js/jquery-mmenu-min.js"></script> </div>
I hope that works. :)
solution3
0 2014-09-19 13:54:37
be careful for beginning use good practice when calling jquery :
!function( $ ) {
your code
}( jQuery )
like that you avoid conflict...
Then be careful when adding js script in html, you can add it twice, for example you call one js in a html file, ok but in the js you load in callback for example another page with the js inside, it will call twice your code.... i had the same probleme before with a recursive call, the js never stop to call it !! in the main page it is better if your js will be called in several files otherwise you have to debug it....
moreover you don't paste all your code we can't help you, we can just tell in my opinion.... not a good advices often...
solution4
0 2019-11-19 20:12:04
May be you have included your script file commmon.js twice. Check your references to it in your code.
solution5
-1 2014-04-03 07:22:18
It might be event bubbling. Use event.preventDefault() , it will prevent the default event from occuring or event.stopPropagation() will prevent the event from bubbling up.
$(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...
});
solution6
-1 2014-04-03 07:34:33
The simplest explanation is that you have included the common.js twice by mistake.
Look into individual scripts and see if you have referenced common.js on top of your main file.
solution7
-3 2014-04-03 07:29:21
Your relevant code is required, but from the snippets above; try putting all the codes in the document ready method.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.