jQuery load（）触发多次

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.

Answer 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");
});