如何在HTML元素上激活和禁用jQuery“click”事件

Question

我有一个按钮，上面附有两个点击事件。我无法在保持另一个“点击”事件的同时禁用一个“点击”事件。

需要有功能所以在第一次点击时会提醒（“先点击”），第二次点击会提示（“第二次被点击”），第三次点击会提醒（“先点击”），第四次点击会警告（“第二次被点击”）等等......

<button id="clickable">

$('#clickable').on('click', function first_click () {

    alert("first was clicked");

$("#clickable").off('click', first_click);

    $('#clickable').on('click', function second_click () {

       alert("second was clicked");

  // need to have functionality so on the first click will alert("first was clicked"),  on the second click will alert("second was clicked"), on the third click will alert("first was clicked"), on fourth click will alert("second was clicked") and so on...    

     });

});

Answer 1

var checkFlag = true;
function clicked(){
  if(checkFlag == true){
  alert("first clicked");
  }else{
  alert("Second clicked");
  }
  checkFlag = !checkFlag;
}

<button onClick="clicked();">Click</button>

使用布尔标志来检查

Answer 2

jQuery代码：

// making disabled
$("#clickable").attr('disabled', '')

// making enabled
$("#clickable").removeAttr('disabled')

您也可以使用简单的JS代码来完成此操作。

var btn = document.getElementById("clickable");

// making disabled
btn.setAttribute("disabled", ""); 

// making enabled
btn.removeAttribute("disabled");

Answer 3

您可以在第一次点击时为您的按钮添加一个特定的类，并检查她是否存在，然后您可以知道您是第一次还是第二次点击

$('#clickable').on('click', function () {
    if (!$(this).is(".step")) {
      // first click
      $(this).addClass('step');
      console.log("first was clicked");
    } else {
      // second click
      $(this).removeClass('step');
      console.log("second was clicked");
    }
});

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

Answer 4

   <script>
      var clickCount = 1;
      document.getElementById("clickable").addEventListener("click", function(){
        if(clickCount % 2 != 0){
      alert("first was clicked")
           clickCount++;
        }else{
      alert("second was clicked")
           clickCount++;
        }
      });
    </script>

Answer 5

(function() {
var step = true;
$("#clickable").on('click', function(e) {
    msg = step ? 'first' : 'second';
    alert(msg + ' was clicked!')
    step = !step;
})})()