Jak tymczasowo wyłączyć zdarzenia kliknięcia przycisku bez jego całkowitego wyłączenia?

Question

Korzystając z jQuery, nie zmieniając atrybutu danego przycisku bez zmiany atrybutu disabled, wyłącz wszystkie zdarzenia kliknięcia dla niego.

Myślałem o odzyskaniu obsługi zdarzeń kliknięcia, rozwiązaniu ich i przechowywaniu (powiedzmy, używając data()).

Następnie mogę ponownie je powiązać po ponownym włączeniu przycisku.

Answer 1

nie trudne do zrobienia, ponieważ jQuery już przechowuje wszystkie swoje programy obsługi zdarzeń jako data() na samym elemencie. Możesz uzyskać (i modyfikować) ten obiekt przez .data().events.

Spróbuj$("#portalLink a").data().events.click = nullw konsoli teraz wyłączyć „Stack Exchange Network” listy rozwijanej w lewym górnym rogu tej strony.

Teraz można łatwo zapisać odniesienie do koparki z:

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

a następnie przywrócić je za pomocą:

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

zauważyć, że nie wyłącza zdarzenia, które są związane poprzez .delegate() lub .live(), ponieważ działają na zasadzie propagacji/propagacji zdarzeń. Aby wyłączyć te, jak również, po prostu związać nowy program obsługi, który blokuje rozmnażanie się do elementów przodków:

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

Ty nawet nie trzeba rozwiązać tę funkcję bloker kiedy nadszedł czas, aby umożliwić teleskopowe ponownie, ponieważ events.click = events._click zastąpi funkcja po prostu związana ze wszystkimi starymi modułami obsługi.

Answer 2

To jest droga. Jeśli onclick określony jako atrybut można przełączyć atrybut busing

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

i

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

Answer 3

Można użyć unbind i bind

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

i

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

Answer 4

Oto jeszcze jeden sposób:

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

Do "wyłączyć" go przez 10 sekund:

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

żywo przypadek testowy: http://jsfiddle.net/yahavbr/ByM6h/

Answer 5

będę rozszerzać na odpowiedź (ów) oferowanych przez Barry i Thariama ... i myślę, że będzie spełniać sprzeciw Ovesh za:

Możesz dodać obszaru nazw do wiązania to wydarzenie.Dzięki temu możesz odwoływać się do tego określonego wiązania zdarzeń później, bez kolizji z innymi powiązaniami. Myślę, że to jest czystsze niż zaakceptowana odpowiedź ... (Aby być uczciwym, może nie było to dostępne w jQuery w czasie oryginalnego pytania).

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

Answer 6

Zamiast robić to coś Zastosowanie rdzenia JavaScript, żeby wykonać to zadanie np Zobacz następujący przykład.

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"); 
     }); 
    } 
} 

Zapisz funkcję javascript w tymczasowym atrybucie i powiąż go, gdy jest to wymagane.

Answer 7

Wszystkie odpowiedzi są tu już nieaktualne - jak jQuery 1.7 należy użyć .off() jak wyjaśniono on the official jQuery site

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