使用 jQuery 启用/禁用元素的 Click 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17447151/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enable/Disable Click event for element using jQuery
提问by Rickyrock
I want Enable/Disable click event on element. I have following code...
我想在元素上启用/禁用单击事件。我有以下代码...
HTML:
HTML：
<a id="CP" style="cursor: pointer; text-decoration: underline;">Current Processes</a>
jQuery:
jQuery：
$(document).on("click", "#CP", function(event) {
$this = $(this);
$this.click(function() {
return false;
});
$this.html("Processing...").css({
"text-decoration": "none",
"cursor": "default"
});
$.ajax({
type: 'post',
url: 'abc.jsp',
success: function(process) {
//My code goes here...
$this.on("click"); // Here i want to bind or add handler which is fired previously.
}
});
});
回答by Jeroen Bellemans
If I understand well, you could do that very simple with the following:
如果我理解得很好，您可以使用以下方法非常简单地做到这一点：
$this.html("Processing...").css({
"cursor": "wait",
"pointer-events": "none"
});
回答by Ruslanas Bal?iūnas
Add some class when performing AJAX request. Remove when done. Do nothing if link has this class.
在执行 AJAX 请求时添加一些类。完成后删除。如果链接有这个类，则什么都不做。
$(document).on("click", "#CP", function(event) {
event.preventDefault();
$a = $(this);
if($a.hasClass('disabled')) {
return false;
}
$a.html("Processing...").addClass('disabled');
$.ajax({
type: 'post',
url: 'abc.jsp',
success: function(process) {
$a.removeClass('disabled');
// restore inner HTML here
}
});
});
回答by mishik
$this.on("click")- this is effectively: "bind click handler to $this that will do nothing"
$this.on("click")- 这实际上是：“将点击处理程序绑定到 $this 什么都不做”
To trigger an event use: $this.click()or $this.trigger("customEvent")
触发事件使用：$this.click()或$this.trigger("customEvent")
回答by Stanley Amos
May be you should use bind("click")so you can as well unbind it. e.g $("#CP").bind("click",function(){..function to run // disable the click event from CP $("#CP").unbind("click"); });. Good luck!
可能是您应该使用，bind("click")以便您也可以解除绑定。例如$("#CP").bind("click",function(){..function to run // disable the click event from CP $("#CP").unbind("click"); });。祝你好运！
回答by yogesh suhagiya
var eventhandler = function() {
$(document).unbind("click");
$this.html("Processing...").css({
"text-decoration": "none",
"cursor": "default"
});
$.ajax({
type: 'post',
url: 'abc.jsp',
success: function(process) {
//My code goes here...
//Here i want to bind or add handler which is fired previously.
$(document).click(eventhandler);
}
});
}
jQuery(document).click(eventhandler);
回答by Rohan
Perhaps you were faced with a common problem when you're using javaScriptto submit a form, the form data is submitted multiple times if the submit button is clicked multiple times. To solve this issue you only need to write one line code with help CSS.
也许您在使用javaScript提交表单时遇到了一个常见问题，如果多次单击提交按钮，则表单数据会被多次提交。要解决这个问题，您只需要编写一行代码并使用 help CSS。
document.getElementById("form1").style.pointerEvents="none";
