2012-03-27 6 views
1

вот код: http://jsfiddle.net/4WyPq/JQuery отключить включить обработчик события ссылки

Так в основном, когда я нажимаю «Button1» оживляет затем отключает кнопку, после этого мне нужно нажать button2 и включить «Button1» событие так Я снова нажимаю 'button1', он должен делать одно и то же событие.

ответ

2

Когда вы привязываете событие click к ссылке, вам нужно включить функцию обработчика кликов.

$(this).bind('click'); 

не делает ничего, потому что нет обработчика функции. Вам нужно будет снова передать функцию обработчика кликов, если вы хотите переподтвердить ее. Это можно сделать, разбив обработчик кликов на собственную локальную функцию, а затем используя эту функцию каждый раз, когда вы привязываете событие click. Вы можете сделать это так:

function bindA1(force) { 
    var a1 = $('.a1'); 
    if (force || a1.hasClass("disabled")) { 
     a1.click(function() { 
      $(this) 
       .addClass("disabled") 
       .unbind("click") 
       .animate({"top": "+=50px"}, "slow"); 
      return(false); 
     }).removeClass("disabled"); 
    } 
} 

bindA1(true); 

$('.a2').click(function() { 
    bindA1(); 
    return(false); 
}); 

Работа демо здесь: http://jsfiddle.net/jfriend00/3kjaR/

Если вы действительно намерены включить и отключить обработчик для ссылок, как это, может быть проще просто установить свойство, которое вы проверяете а не удалять обработчики событий.

Вы можете использовать флаг, как это:

$('.a1').click(function(){ 
    if (!$(this).data("disabled")) { 
     $('.a1').animate({"top": "+=50px"}, "slow"); 
     $(this).data("disabled", true); 
    } 
}); 

$('.a2').click(function(){ 
    $(".a1").data("disabled", false); 
}); 
​ 

Работа демо здесь: http://jsfiddle.net/jfriend00/NSZ8P/

+0

я думаю, что это один простой в использовании. Я выбираю u jfriend00 – test

2
  • использовать .off() удалять обработчик
  • использовать .on(), чтобы связать его снова
  • используйте многоразовая функция для связывания

demo:

$(function() { 

    function clickHandler() { 
     $(this).animate({ 
      "top": "+=50px" 
     }, "slow").off('click'); 
     return false; 
    } 

    $('.a1').on('click', clickHandler); 

    $('.a2').on('click',function() { 
     $('.a1').on('click', clickHandler); 
     return false; 
    }); 
});​ 
+3

Нужно быть осторожным с этим, потому что последовательные клики на 'a2' дадут вам дубликаты обработчиков кликов на' a1'. – jfriend00

+0

@ jfriend00 хорошо пункт. – Joseph

0

Я играл с скрипкой, и дал вам другой вариант, вместо того, чтобы возиться с ячейками памяти для случая связывания и того, чтобы получить все запутался ... попробуйте это:

http://jsfiddle.net/4WyPq/2/

$('.a1').click(function(){ 
    if(!$(this).hasClass("disabled")){ 
     $(this).addClass("disabled"); 
     $('.a1').animate({"top": "+=50px"}, "slow"); 
    } 
}); 

$('.a2').click(function(){ 
    $(".a1").removeClass("disabled"); 
}); 
+0

Вы также можете использовать .data() этого элемента, но я избегаю этого, потому что IE немного придирчив к этому. Однако у jfriend00 есть хороший пример в другом ответе. – Relic