I have a <span>
element which does something on a click event.
When I disable it, using jQuery:
$("span").attr("disabled", true);
The event handler continues to be called when I click on the span element.
I am testing in Chrome 13. Any thoughts?
This question is related to
html
jquery
jquery-events
The disabled attribute's standard behavior only happens for form elements. Try unbinding the event:
$("span").unbind("click");
The disabled
attribute is not global and is only allowed on form controls. What you could do is set a custom data attribute (perhaps data-disabled
) and check for that attribute when you handle the click event.
Try this:
$("span").css("pointer-events", "none");
you can enabled those back by
$("span").css("pointer-events", "auto");
There is a dirty trick, what I have used:
I am using bootstrap, so I just added .disabled
class to the element which I want to disable. Bootstrap handles the rest of the things.
Suggestion are heartily welcome towards this.
Adding class on run time:
$('#element').addClass('disabled');
@click=" canClick ? doClick : void 0"
User click but nothing happen can meet your
I use it in vuejs work fine
The best method is to wrap the span inside a button and disable the button
$("#buttonD").click(function(){_x000D_
alert("button clicked");_x000D_
})_x000D_
_x000D_
$("#buttonS").click(function(){_x000D_
alert("span clicked");_x000D_
})
_x000D_
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>_x000D_
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />_x000D_
_x000D_
_x000D_
<button class="btn btn-success" disabled="disabled" id="buttonD">_x000D_
<span>Disabled button</span>_x000D_
</button>_x000D_
_x000D_
<br>_x000D_
<br>_x000D_
_x000D_
<span class="btn btn-danger" disabled="disabled" id="buttonS">Disabled span</span>
_x000D_
Try unbinding the event.
$("span").click(function(){
alert($(this).text());
$("span").not($(this)).unbind('click');
});
Here is the fiddle
Source: Stackoverflow.com