Связывание и открепление $.live() и $.die()

Question

У меня возникли некоторые проблемы с методами jquery "живи и умри".

http://jsfiddle.net/fC5Nr/4/

//bind above function to clicking a
$('a').live('click', functionThatWaitsFiveSeconds)

Мне нужно прикрепить обработчик событий к нажатию на ссылку - и я хочу отсоединить обработчик во время работы функции, чтобы предотвратить повторное выполнение функции до ее завершения (функция выполняет запрос ajax, а затем обрабатывает ответ.

Я могу сделать все вышеперечисленное просто отлично.

Однако, поскольку вышеуказанный обработчик прикреплен к тегу (a), мне нужно вернуть значение false (чтобы предотвратить переход по ссылке). Для этого мне нужно привязать другую функцию для обработки кликов и возврата false.

Мне нужно знать, как отменить привязку к моей сложной функции - при этом всегда сохраняя привязку моего простого (return false).

Приведенная выше скрипка должна работать, но после отмены привязки обработчика событий она не привязывается снова? Я пробовал несколько комбинаций пространства имен и т. Д., Но не могу собрать это вместе.

Answer 1

Обновление получилось

   function denyRest() {
        $("body").append("<h1>return false</h1>");
        return false;
    }
    function functionThatWaitsFiveSeconds() {
        $('a').die('click.thing', functionThatWaitsFiveSeconds);
        var loader = $('<div class="loader">doing some stuff</div>');
        $('#content').append(loader);
        loader.animate({
            'width': '500'
        }, 5000, function() {
            loader.remove();
            $('a').die('click.otherthing', denyRest).live('click.thing', functionThatWaitsFiveSeconds).live('click.otherthing', denyRest);
        });
    }

    $('a').live('click.thing', functionThatWaitsFiveSeconds);
    $('a').live('click.otherthing', denyRest);

Обновленная скрипка.

Я считаю, что проблема была в этом.

1. Используйте live, чтобы прикрепить обработчик для ожидания 5 секунд.
2. Используйте live, чтобы прикрепить обработчик, который возвращает false, чтобы остановить события.
3. Щелкните по метке привязки, которая удаляет обработчик ожидания 5 секунд.
4. Клики по тегу привязки в это время будут остановлены с помощью оператора return false.
5. СЕЙЧАС возвращаемое ложное утверждение является первым. Как только мы перепривязываем обработчик ожидания 5 секунд, он запускается на втором месте, но отклоняется обработчиком возврата false.
6. Исправлено это, чтобы убрать оба обработчика и связать их в правильном порядке.

Answer 2

Если вы не возражаете против этого подхода (используя маркерный класс), то это может быть то, что вы ищете. Нет беспорядочной привязки и развязки событий - пытаясь найти способ ответить на ваш вопрос, я обнаружил, что довольно сложно отслеживать все, что было связано / не связано на странице, и однажды я достиг стадии, когда у меня было несколько загрузчиков. появляются для одного клика.

$(document).ready(function(){
    function functionThatWaitsFiveSeconds(el, e){
        //stop default link click events
        e.preventDefault();
        e.stopPropagation();

        if($(el).hasClass('loadingMarkerClass')) {
           return false; //we're currently processing this element already
       }
        $(el).addClass('loadingMarkerClass'); //add a dummy, marker class to indicate we're showing a loader for this element

        var loader = $('<div class="loader">Loading: ' + $(el).html() + '</div>');
        $('#content').append(loader);
        loader.animate({'width': '500'}, 5000, function(){
            loader.remove();
            $(el).removeClass('loadingMarkerClass');
        });
    }

    //bind above function to clicking a
    $('a').live('click', function(e){functionThatWaitsFiveSeconds(this, e)});

});

Answer 3

На самом деле самый простой способ добиться этого - удалить тег href на ссылке привязки.

Таким образом, ваш код становится

$(document).ready(function(){

    function functionThatWaitsFiveSeconds(){
       // $('a').die('click', functionThatWaitsFiveSeconds);
        var loader = $('<div class="loader">doing some stuff</div>');
         $(this).attr("href","#");
            $('#content').append(loader)
            loader.animate({'width': '500'}, 5000, function(){
                loader.remove();
                //now rebind click handler
         //       $('a').live('click', functionThatWaitsFiveSeconds)
            })
    }



    //bind above function to clicking a
    $('a').live('click', functionThatWaitsFiveSeconds)

    //need to return false at all times to prevent folowing link
    $('a').live('click',function(){
        return false;    
    })
})