Ajax loader и события запускаются не раз

Question

У меня есть веб-сайт, содержимое которого загружается с помощью ajax.Все мои страницы на самом деле являются отдельными файлами, и когда мне нужно вызвать страницу, я просто передал ссылку на свою функцию "pageLoader".

Дескриптор pageLoader с загрузкой содержимого и перезапуск / повторное определение необходимыхтакие функции, как кнопка закрытия.

Поскольку в реальной функции ~ 250 строк, я переписал короткую версию;

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;

ОК.Если я нажимаю ссылку на странице, она вызывает pageLoader.Если я щелкаю одну из ссылок только один раз, pageLoader вызывается один раз.Если я нажимаю другую ссылку, pageLoader вызывается дважды.Если я снова нажму другую ссылку, pageLoader будет вызываться третий раз и т. Д.

То же самое происходит со ссылками, которые связаны с «живой» функцией в коде.Если я нажимаю a.tabs, он пишет в консоль twite.Если я нажал другую ссылку .tabs, она записывалась в консоль четыре раза и увеличивалась вдвое за каждый клик.

Не понимаю, почему это происходит.Пожалуйста, дайте мне знать, если у вас есть идеи.

Answer 1

Эти live обработчики событий "Прикрепите обработчик к событию для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем." , поэтому они вам не нужны в вашем ajaxзвоните.

Answer 2

Вы можете решить это, используя bind и unbind . Как это:

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

Но я бы предпочел, чтобы вы добавляли эти события в вашу функцию $ (document) .ready вместо того, чтобы каждый раз делать вызов AJAX.

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