So aktivieren und deaktivieren Sie jQuery 'click' Ereignisse auf einem HTML-Element

Question

Ich habe eine Schaltfläche mit zwei Klickereignissen verbunden. Ich habe Probleme, ein "Klick" -Ereignis zu deaktivieren, während ich ein anderes aktiviere.

müssen Funktionalität haben, so auf dem ersten Klick wird eine Warnung ("zuerst wurde geklickt"), auf dem zweiten Klick wird eine Warnung ("zweite wurde geklickt"), auf dem dritten Klick wird warn ("zuerst wurde geklickt") , auf dem vierten Klick alert ("zweite geklickt wurde") und so weiter ...

<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>

Verwendung boolean flag

Answer 2

jQuery-Code:

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

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

Sie können auch JS-Code eingeben, um diesen Vorgang abzuschließen.

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

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

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

Answer 3

Sie können eine bestimmte Klasse zu Ihrer Schaltfläche hinzufügen, wenn es der erste Klick und prüfen sie, ob, wenn es oder nicht, dann können Sie, wenn Sie in der ersten oder zweiten Klick sind

$('#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; 
})})()