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

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

2 голосов
/ 03 марта 2011

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

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

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

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

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

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

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

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

Ответы [ 3 ]

2 голосов
/ 03 марта 2011

Обновление работает 

   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. NOW оператор возврата false является первым.После того, как мы перепривязали обработчик ожидания 5 секунд, он находится на втором месте для запуска, но отклоняется обработчиком возврата false.
  6. Исправлено это, чтобы уничтожить оба обработчика и связать их в правильном порядке.
1 голос
/ 03 марта 2011

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

$(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)});

});
0 голосов
/ 03 марта 2011

На самом деле самый простой способ добиться этого - удалить тег 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;    
    })
})
...