jQuery使用.off取消绑定单击处理程序，然后使用.on重新绑定

I am trying to prevent a button from being clicked twice by accident by unbinding the click handler with .off like this...

我试图通过解锁点击处理程序与.off这样的方式来防止按钮被意外点击两次......

$(".button").click(function () {
    console.log("Button has been clicked and disabled");
		$( ".button" ).off();
});

$(".button2").click(function () {
    console.log("Button has been re-enabled");
		$( ".button" ).on();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">
    Click Me
</div>

<button class="button2">
    Re-enable click
</button>

I am struggling with rebinding it with .on, can anyone point me in the direction of an example or point out what I am doing wrong?

我正在努力用.on重新绑定它，任何人都可以指向我的方向或指出我做错了什么？

2 个解决方案

#1

In your click function for button 2, re-enable the first button's click handling with : $(".button").click(buttonOneClick); Here is an example:

在按钮2的单击功能中，使用以下命令重新启用第一个按钮的单击处理：$（“。button”）。单击（buttonOneClick）;这是一个例子：

var buttonOneClick = function () {
    console.log("Button has been clicked and disabled");
		$( ".button" ).off();
};
$(".button").click(buttonOneClick);

$(".button2").click(function () {
    console.log("Button has been re-enabled");
    $(".button").click(buttonOneClick);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">
    Click Me
</div>

<button class="button2">
    Re-enable click
</button>

#2

Using .one()

using .one() there's no need to use .off() since the event is allowed only once. To re-enable the button you simply re-call the enabling function that does the .one() stuff:

使用.one（）不需要使用.off（），因为事件只允许一次。要重新启用按钮，只需重新调用执行.one（）内容的启用功能：

function buttonExec() {
  console.log("Button has been clicked and disabled");
}

function buttonEnable() {
  console.log("Button has been enabled");
  $(".button").one("click", buttonExec); // .one()
}

buttonEnable();                          // enable initially
$(".enable").on("click", buttonEnable);  // and on ".enable" click

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="button">Click Me</button>
<button class="enable">Re-enable click</button>

Using .on() and .off()

function buttonExec() { 
  console.log("Button has been clicked and disabled");
  $(this).off("click");                  // .off() since we used .on()
}

function buttonEnable() {
  console.log("Button has been enabled");
  $(".button").on("click", buttonExec);  // .on()
}

buttonEnable();                          // enable initially
$(".enable").on("click", buttonEnable);  // and on ".enable" click

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="button">Click Me</button>
<button class="enable">Re-enable click</button>