Dynamic jquery loading, why script is executed 2 times?


I am making a widget to work on any site, that means not my site, so I have no control of what other libraries are used on the page.
Thats why I am loading my own jQuery libraries dynamically and then execute my own code.

An issue I have that some sites are loading fine and all is working as expected, but some sites are executing the code 2 times.

I have made a page dump and put on my own server, so I can replicate the issue better.

GOOD: here is a page that works OK: (see the button that says: send these contact details and map to your mobile.)


BAD: here is the page that shows the button I am trying to load 2 times:


As you can see the button appears 2 times, which is wrong…
Even it shows 2 times, the popup appears just ok when you click on the button.

Would anyone be able to check what can be wrong here?
the code is in the:

<div id="now_send_it_wrapper">

so its easier to find.

Any help would be much appreciated.


Hi Vladas,

In your test case it looks like what is happening is that jScrollPane is causing the script to get injected again.

What happens is that your button script gets injected and run when the DOM reaches it, subsequently jScrollPane applies itself to a parent and injects the “.bodytext” div into a scrollpane generated div. It looks like this is causing your script to be executed again.

My advice to you would be to not have a <script> tag in the middle of your content to generate this button, but instead putting that functionality in the $(document).ready(function(){}); block.

Additionally, I’ll point out that you’re including a very very old version of JavaScript in the <head> but are later on injecting a newer one.

Here I’d recommend that you simply include the later version (or better yet, the latest) and not needlessly inject jQuery if it’s already present :slight_smile:

Hi AussieJohn,

thanks for your reply.

The thing with multiple jqueries loaded is:
I give a piece script to a site to include into their pages, and at that point I do not control what libraries they have loaded. I can check if jQuery is loaded, but that does not help. my widget needs to run “colorbox” which is not working on the old versions of jQuery. Thats why I need to include it anyway and then execute my scripts.

If I would have control over what else is included in the html document I would definitely leave only the latest version (or whatever works with my scripts). Thats why I am going the hard way and trying to include my own jQuery and do noConflict (which is another pain).



on this example the button loads only once, and it has jQuery already included:


so not really sure why it is different on 2 separate sites.