與.off jQuery的解除綁定單擊處理，然後用。對

Question

我試圖阻止點擊了兩次意外的解除綁定，像這樣.off單擊處理按鈕重新綁定...

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

 
$(".button2").click(function() { 
 
    console.log("Button has been re-enabled"); 
 
\t \t $(".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>

我很努力地用.on重新綁定它，任何人都可以指向我的示例方向或指出我做錯了什麼？

Answer 1

在對按鈕2的點擊功能，重新啓用的第一個按鈕的點擊與處理：$(".button").click(buttonOneClick); 下面是一個例子：

var buttonOneClick = function() { 
 
    console.log("Button has been clicked and disabled"); 
 
\t \t $(".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>

Answer 2

使用.one()

使用.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>

使用.on()和.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>