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?

A jsFiddle won't help here. The same thing is happening to the rest of the code. — chuckfinley, Apr 03 '14 at 07:16
If you want a solution you should post your html or a fiddle. Its all up to you. — Anoop Joshi P, Apr 03 '14 at 07:19
The only reason for the handler firing twice is if you're adding it twice. I don't see any reason for that in what you've posted. I suspect you have duplicate code in your actual site. — Barmar, Apr 03 '14 at 07:20
@Barmar check out my HTML - i am not adding it twice. The code is in `common.js` — chuckfinley, Apr 03 '14 at 07:27
If you can't replicate this in jsfiddle, can you provide a link to the actual site? — Barmar, Apr 03 '14 at 07:32
@chuckfinley i don't see any multiple logs in the page you shared other than something like `setting up slides` — T J, Apr 03 '14 at 07:48
@TilwinJoy That's the problem he's talking about. There's only one `console.log()` that does that in the `$(window).load()` handler, it shouldn't be logging twice. — Barmar, Apr 03 '14 at 07:52
I'm not sure where it's happening, but it looks like something is reloading common.js dynamically. — Barmar, Apr 03 '14 at 07:53
@Barmar i added a debugging point in `$(window).load()`. Everything is being executed twice. This is just unreal. — chuckfinley, Apr 03 '14 at 07:54
I see that. When it hits that debugging point the second time, it's it's in a file called VM####, where #### is a number that changes each time. That's why I think the file is being reloaded dynamically. I don't see where that's happening, though. — Barmar, Apr 03 '14 at 08:04
does this have anything to do with the js animating `html` ? will it trigger another load after the animation? — T J, Apr 03 '14 at 08:08
I moved all JS includes to the head of the page and it solved the issue. It works but i don't know why :( — chuckfinley, Apr 03 '14 at 08:25
@chuckfinley you should really add that as an answer and accept it — Klors, Jul 25 '14 at 15:35

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

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:

jQuery $(document).ready () fires twice

edited May 23 '17 at 12:11

Community

1
1

answered Apr 03 '14 at 18:43

adelphospro

165
1
2
11

score 0 · Answer 2 · answered Jun 12 '14 at 10:52

0

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. :)

answered Jun 12 '14 at 10:52

user3719086

35
8

score 0 · Answer 3 · answered Sep 19 '14 at 13:54

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...

score 0 · Answer 4 · answered Nov 19 '19 at 20:12

0

May be you have included your script file commmon.js twice. Check your references to it in your code.

answered Nov 19 '19 at 20:12

Lencho

31
2

score -1 · Answer 5 · answered Apr 03 '14 at 07:22

-1

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...

});

answered Apr 03 '14 at 07:22

akshaykumar6

2,147
4
18
31

The same thing is happening for every single block of code. This can't be it – chuckfinley Apr 03 '14 at 07:23
What about `$(window).load()`? That doesn't bubble. – Barmar Apr 03 '14 at 07:32

score -1 · Answer 6 · answered Apr 03 '14 at 07:34

-1

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.

answered Apr 03 '14 at 07:34

user3436048

11
1

Please look at the question and you will notice that i am not including the file twice. – chuckfinley Apr 03 '14 at 07:35
@chuckfinley firebug reported the script is imported again dynamically. – user3436048 Apr 03 '14 at 08:02

score -3 · Answer 7 · answered Apr 03 '14 at 07:29

-3

Your relevant code is required, but from the snippets above; try putting all the codes in the document ready method.

answered Apr 03 '14 at 07:29

Ammog

124
3

It's already in the ready handler. If it weren't, it probably wouldn't fire at all, not fire twie. – Barmar Apr 03 '14 at 07:31

jQuery code firing twice

7 Answers7