How to stop the jQuery .load() function from firing more than once?

Question

Is it possible to make a function strictly only callable once? As in, once per time the page is loaded.

I'm using :

$( document ).ready( function() { 
    $( "#targetDiv" ).load( "http://www.example.com #specificElementID" );
});

I'm finding that if you click all over the page lots of times whilst it's loading, that it sometimes seems to load twice? Is there a way of preventing this action from happening more than once? I was under the impression that having $( document ).ready( function() { ... would help me to achieve this. But it does not appear to be the case!

Your posted code would be called only once for sure. `I'm finding that if you click all over the page lots of times whilst it's loading, that it sometimes seems to load twice?` I guess your observation is wrong. If you are using any click event, then post relevant code — A. Wolff, Oct 09 '15 at 11:44
This code snippet is good. Show us other code. Try to represent this problem at JSFiddle. — Yeldar Kurmangaliyev, Oct 09 '15 at 11:44
Nothing in code shown would cause this issue. Is the same code being loaded again? — charlietfl, Oct 09 '15 at 11:49
I'm not sure why this kind of question without any way to replicate issue can be upvoted... What's wrong with SO? I will upvote it if OP can send at least link where this issue can be checked — A. Wolff, Oct 09 '15 at 11:56
@jamiec I think regarding dupe and question here, it would be a workaround to a XY problem — A. Wolff, Oct 09 '15 at 12:00

score 4 · Accepted Answer · edited May 23 '17 at 11:52

4

The ready handler would not be called more than once in normal cases. However, if your file is loaded twice, this will cause the ready handler to be called twice.

Using a boolean flag may hide the real problem (but you still have to see what's the root issue):

var _ready = false;
$( document ).ready( function() { 
    if (_ready) { return; }
     _ready = true;
    $( "#targetDiv" ).load( "http://www.example.com #specificElementID" );
});

For more information, see this related question: jQuery $(document).ready () fires twice

edited May 23 '17 at 11:52

Community

1
1

answered Oct 09 '15 at 11:45

Ionică Bizău

109,027
88
289
474

2

That ready handler will only ever be called once unless the code is loaded again. This answer doesn't make sense – charlietfl Oct 09 '15 at 11:46
@charlietfl My brother had exactly the same problem and that's how we solved it. I wonder if the load method calls the ready handler twice or something related to that. It seems that [`iframe`s can create such a behavior](http://stackoverflow.com/questions/10727002/jquery-document-ready-fires-twice#comment13935697_10727036). – Ionică Bizău Oct 09 '15 at 11:50
@charlietfl I edited my answer. – Ionică Bizău Oct 09 '15 at 11:52
@IonicăBizău Ya but because (see comment): `Avoid using src="#" attribute, because it is loading the same page on parent window and inside iframe, that's why it looks like code is called twice. Remove src attribute or set it to "about:blank" to avoid such behavior` So the same script is called twice – A. Wolff Oct 09 '15 at 11:53
@A.Wolff Agree. Without more code provided by OP it's hard to say what's going on. We can only speculate. :) – Ionică Bizău Oct 09 '15 at 11:55

score 1 · Answer 2 · edited Oct 09 '15 at 11:46

1

add this line

$("#some_id").unbind('change');

before

$("#targetDiv").load("http://www.example.com #specificElementID");

edited Oct 09 '15 at 11:46

Irvin Dominin

30,819
9
77
111

answered Oct 09 '15 at 11:46

Arunjith C Rex

26
2

How to stop the jQuery .load() function from firing more than once?

2 Answers2