Как временно отключить события кликов на кнопке без фактического отключения?

Используя jQuery, я бы хотел, не изменяя атрибут disabled данной кнопки, отключить все события клика для него.

Я думал о том, чтобы получить обработчики событий щелчка, отвязать их и сохранить их (скажем, используя data()).

Затем я могу повторно связать их, как только кнопка снова будет включена.

Ответы

Ответ 1

Не сложно сделать, поскольку jQuery уже хранит все свои обработчики событий как data() для самого элемента. Вы можете получить (и изменить) этот объект через .data().events.

Теперь вы можете легко сохранить ссылку на обработчики с помощью:

 events._click = events.click;
 events.click = null;

А затем восстановите их, используя:

 events.click = events._click;
 events._click = null;

Обратите внимание, что это не приведет к отключению событий, которые связаны через .delegate() или .live(), поскольку они работают путем барботирования/распространения событий. Чтобы отключить их, просто привяжите новый обработчик, который блокирует распространение элементов предков:

 events._click = events.click;
 events.click = null;
 // Block .live() and .delegate()
 $("#el").click(function (e) {
     e.stopPropagation();
 });

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

Ответ 2

Вот еще один способ:

$("#myButton").click(function() {
    if ($(this).attr("temp_disable") == "disabled") {
        //nothing to do, temporarily disabled...
    }
    else {
        alert("You clicked me!");
    }
});

Чтобы "отключить" его в течение 10 секунд:

$("#myButton").attr("temp_disable", "disabled");
window.setTimeout(function() { $("#myButton").attr("temp_disable", ""); }, 10000);

Живой тестовый пример: http://jsfiddle.net/yahavbr/ByM6h/

Ответ 3

Все ответы здесь устарели - с jQuery 1.7 вы должны использовать .off(), как описано на официальном сайте jQuery

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>off demo</title>
  <style>
  button {
    margin: 5px;
  }
  button#theone {
    color: red;
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="theone">Does nothing...</button>
<button id="bind">Add Click</button>
<button id="unbind">Remove Click</button>
<div style="display:none;">Click!</div>
 
<script>
function flash() {
  $( "div" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
  $( "body" )
    .on( "click", "#theone", flash )
    .find( "#theone" )
      .text( "Can Click!" );
});
$( "#unbind" ).click(function() {
  $( "body" )
    .off( "click", "#theone", flash )
    .find( "#theone" )
      .text( "Does nothing..." );
});
</script>
 
</body>
</html>

Ответ 4

Это путь. Если у вас включен onclick как атрибут, вы можете переключить маршрутизацию атрибутов

 $(button_element).attr('click', '');

 $(button_element).attr('click', 'do_the_regular_action()');

Ответ 5

Вы можете использовать unbind и bind

$('#control').unbind('click');

$('#control').bind('click', NameOfFunctionToCall);

Ответ 6

Я расширю ответ, предложенный Барри и Тариамой... который, я думаю, удовлетворит возражения Овеса:

Вы можете добавить пространство имен к привязке событий. Это позволяет позже ссылаться на это привязку конкретного события, не сталкиваясь с другими привязками. Я думаю, что это чище, чем принятый ответ... (Справедливости ради, это может быть не доступно в jQuery во время исходного вопроса).

// A generic click handler:
$('.myButton').click(function() { ... });

// A namespaced click handler:
$('.myButton').bind('click.someSituation', function()  { ... });

// Later you can unbind only the handler you want by using the namespace:
$('.myButton').unbind('click.someSituation');

// The default click handler still works.

Ответ 7

Вместо того, чтобы делать это, используйте Core Javascript для выполнения этой задачи например Посмотрите следующий пример.

function MakeSaveDisabled(flg) {
    if (flg != null) {
        $(".btnpost").each(function () {
            this.removeAttribute("disabled");
            if (this.hasAttribute("oclickevt")) {
                this.setAttribute("onclick", this.getAttribute("oclickevt"));
            }
        });
    }
    else {
        $(".btnpost").each(function () {
            this.setAttribute("disabled", "true");
            if (this.getAttribute("onclick") != null) {
                this.setAttribute("oclickevt", this.getAttribute("onclick"));
            }
            this.removeAttribute("onclick");
        });
    }
}

Сохраните функцию javascript в некотором временном атрибуте и привяжите его, когда вам нужно.