JQuery load() fires multiple times

Question

This is my code:

$(document).ready(function () {
var na = $("#navDivA");
var nb = $("#navDivB");
var ca = $("#contentA");
var cb = $("#contentB");
var la = $("#home");
var lb = $("#about");
var firstSession = true;

na.on("click", function () {
    ca.load("home.html", function(){
         alert("Loaded");
       });
   });

nb.on("click", function () {
    cb.load("about.html");
   });
}); 

<div id="wrapper">
    <div id="navDivA"><a id="home">Home</a></div>
    <div id="navDivB"><a id="about">About</a></div>
    <div id="contentA"></div>
    <div id="contentB"></div>
 </div>

Why does it alert multiple times every time I start to click? How can I avoid this? I want to load the html file once.

Multipe times per click or just one time each click? Maybe you are looking for one() Anyway, your question is missing context to make it clear — A. Wolff
– A. Wolff, Commented Nov 10, 2015 at 18:18
At the first click it fires once, but at the second he goes 3 times and and the third click he goes multiple times — Anton Styopin
– Anton Styopin, Commented Nov 10, 2015 at 19:28

krivtom · Accepted Answer · 2015-11-10 18:21:50Z

1

You can use function one instead of on. According to documentation

The handler is executed at most once per element per event type.

which seems to be what you need. Change the code to

na.one("click", function () {
    ca.load("home.html", function(){
         alert("Loaded");
    });
});

nb.one("click", function () {
    cb.load("about.html");
});

answered Nov 10, 2015 at 18:21

krivtom

25k10 gold badges53 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Anton Styopin Over a year ago

Ty for answer, but it doest work. He still fires the method multiple times.

krivtom Over a year ago

@AntonStyopin Could you create jsFiddle demonstrating the issue?

Anton Styopin Over a year ago

I tried this code in jsFiddle and it worked fine. But in my code it doesnt. I think it might be because of the .html file inside the load()-function.

Anton Styopin Over a year ago

jsfiddle.net/xmtsu3nb/16 ... Here the one() function works but in my case he alerts multiple times after a few clicks

krivtom Over a year ago

@AntonStyopin Could it be that you have more that one element with id="contentA" on your page? Unfortunately if we can't see reproduced issue in jsFiddle or similar service there is not much we can help with

|

Collectives™ on Stack Overflow

JQuery load() fires multiple times

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related