Setting attribute disabled on a SPAN element does not prevent click events

Question

I have a  lt span gt  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

User · Answer

The disabled attribute s standard behavior only happens for form elements  Try unbinding the event      span   unbind  click

User · Answer

The best method is to wrap the span inside a button and disable the button   x000D   x000D      buttonD   click function    x000D    alert  button clicked    x000D     x000D   x000D      buttonS   click function    x000D    alert  span clicked    x000D     x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 1 1 css bootstrap min css  rel  stylesheet    gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  lt script src  https   stackpath bootstrapcdn com bootstrap 4 1 1 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 1 1 css bootstrap min css  rel  stylesheet    gt  x000D   x000D   x000D   lt button class  btn btn-success  disabled  disabled  id  buttonD  gt  x000D       lt span gt Disabled button lt  span gt  x000D   lt  button gt  x000D   x000D   lt br gt  x000D   lt br gt  x000D   x000D    lt span class  btn btn-danger  disabled  disabled  id  buttonS  gt Disabled span lt  span gt  x000D   x000D   x000D

User · Answer

Try this      span   css  pointer-events    none      you can enabled those back by     span   css  pointer-events    auto

User · Answer

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

User · Answer

click   canClick   doClick   void 0   User click but nothing happen can meet your   I use it in vuejs work fine

User · Answer

Try unbinding the event      span   click function    alert   this  text            span   not   this   unbind  click          Here is the fiddle

User · Answer

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

[html] Setting attribute disabled on a SPAN element does not prevent click events

Examples related to html

Examples related to jquery

Examples related to jquery-events