Ajax loader and events runs more than once

I have a website that pages' contents loaded by ajax. All of my pages are seperate files actually and when I need to call a page, I just passed the link to my "pageLoader" function.

pageLoader handle with content loading and re-ignite/re-define the necessary functions like close button.

Since the actual function have ~250 lines, I did re-write 开发者_开发问答a short version;

var pageLoader = function(link){
    var page = $(link).attr("href").replace('#','');

    if(page != lastCalledURL){

        // Load the page.

        $.ajax({
            beforeSend: function(){ /* remove previously loaded content; */ },
            success: function(data){

                // remove the loaded content if user clicked to close button.

                $("a.close-button").live("click", function(){
                    $(this).parent().fadeOut().remove();
                    return false;
                });

                // load another page if user click another page's link.


                $("a.content-loader-link").live("click",function(){
                    pageLoader(this);
                });

                // handle with tabs

                $("a.tabs").live("click", function(){
                    var index = $("a.tabs").index(this);
                    console.log(index);
                    return false;
                    });

            }
        });

        lastCalledURL = page;

    }

    return false;

OK. If I click a link in the page, It calls pageLoader. If I click one of the links just once, pageLoader called once. If I click another link, pageLoader called twice. If I click another link again, pageLoader called third times and so on.

Same things happen for the links that bind with "live" function in the code. If I click a.tabs, it write to console twite. If I clicked another .tabs link, it write to console four times and increasing double for every click.

I don't why it happens. Please let me know if you have any idea.

You can solve it by using the bind and unbind. Like this:

$("a.tabs").unbind('click').bind("click", function(){
     var index = $("a.tabs").index(this);
     console.log(index);
     return false;
});

But i would prefer that you attach this events in your $(document).ready function instead of everytime you make an AJAX call.

$(document).ready(function() {
  // Attach your events here.
});

Those live event handlers "Attach a handler to the event for all elements which match the current selector, now and in the future." so you shouldn't need them in your ajax call.