Question

Here’s the code:

$(document).ready(function(){
  $(".menu ul li a").click( function(){
    curpage = $(this).attr('href');
    loadpage(curpage);
  });
});

function loadpage(){
    switch (curpage){
    case "#page1":
        getpage1();
    break;
    case "#page2":
        getpage2();
    break;
    }
}

function getpage1() {
    $("#content .main").load("/page1.htm");
    $("#content .main .new").livequery( function(){
        Boxy.alert("Sample Alert", null, {title: 'Alert!'});
    });
}

function getpage2() {
    $("#content .main").load("page2.htm");
}

So, if I click the link for #page1, things work as expected. If I click the link for #page2, things work as expected. But when I click the link for #page1 for the second time, the livequery function will fire twice. I can click the link for #page2, then click the link for #page1 for the third time and the livequery function will fire three times.

I’m at a loss for words on this one. Please help. It doesn’t matter what kind of function I call within livequery, whatever it is, it will fire multiple times.

Answer 1

That’s because you are binding the livequery function every time you load that bit of ajaxed content…

You do not have to do that, that’s the advantage of using livequery…

Move this bit of code:

$("#content .main .new").livequery( function(){
        Boxy.alert("Sample Alert", null, {title: 'Alert!'});
    });

out of the getpage1() and into the document.ready block like so:

$(document).ready(function(){
  $(".menu ul li a").click( function(){
    curpage = $(this).attr('href');
    loadpage(curpage);
  });

  $("#content .main .new").livequery( function(){
      Boxy.alert("Sample Alert", null, {title: 'Alert!'});
  });
});