PHP code:
<a id="a$id" onclick="check($id,1)" href="javascript:void(0)" class="black">Qualify</a>
I want to remove the onclick="check($id,1) so the link cannot be clicked or "check($id,1) won't be fired. How can I do it with JQuery?
8 Answers
Old Way (pre-1.7):
$("...").attr("onclick", "").unbind("click");
New Way (1.7+):
$("...").prop("onclick", null).off("click");
(Replace ... with the selector you need.)
// use the "[attr=value]" syntax to avoid syntax errors with special characters (like "$")
$('[id="a$id"]').prop('onclick',null).off('click');<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="a$id" onclick="alert('get rid of this')" href="javascript:void(0)" class="black">Qualify</a>
8 Comments
Roatin Marth
Shouldn't that be removeAttr('onclick')?
glmxndr
Yep, good point, might be cleaner, but I'm not sure it would be different from execution point of view.
Lance Cleveland
With jQuery 1.7+ you can use on/off: stackoverflow.com/questions/209029/…
andyface
See first comment on removeAttr api.jquery.com/removeattr
Removing an inline onclick event handler using .removeAttr() doesn't achieve the desired effect in Internet Explorer 6, 7, or 8. To avoid potential problems, use .prop() instead
onetwo12
@andyface yes that is in the documentation, but I had to use
.prop() for IE11 also. |
I know this is quite old, but when a lost stranger finds this question looking for an answer (like I did) then this is the best way to do it, instead of using removeAttr():
$element.prop("onclick", null);
Citing jQuerys official doku:
"Removing an inline onclick event handler using .removeAttr() doesn't achieve the desired effect in Internet Explorer 6, 7, or 8. To avoid potential problems, use .prop() instead"
3 Comments
zdarsky.peter
I found that this is the best how to remove onlick event when you have typed it like this.
<span onlick="method()">sometext>/span> The event is fully unbinded and works great
Gus
I don't think this is the best way. jsfiddle.net/TN2wr vs jsfiddle.net/TN2wr/1
metamagikum
I am using a JQ older than 1.6 therefore $(element).attr('onclick', null); works for me.
Removing onclick property
Suppose you added your click event inline, like this :
<button id="myButton" onclick="alert('test')">Married</button>
Then, you can remove the event like this :
$("#myButton").prop('onclick', null); // Removes 'onclick' property if found
Removing click event listeners
Suppose you added your click event by defining an event listener, like this :
$("button").on("click", function() { alert("clicked!"); });
... or like this:
$("button").click(function() { alert("clicked!"); });
Then, you can remove the event like this :
$("#myButton").off('click'); // Removes other events if found
Removing both
If you're uncertain how your event has been added, you can combine both, like this :
$("#myButton").prop('onclick', null) // Removes 'onclick' property if found
.off('click'); // Removes other events if found
Comments
if you are using jquery 1.7
$('html').off('click');
else
$('html').unbind('click');
Comments
It is very easy using removeAttr.
$(element).removeAttr("onclick");
Comments
After trying so hard with bind, unbind, on, off, click, attr, removeAttr, prop I made it work. So, I have the following scenario: In my html i have NOT attached any inline onclick handlers.
Then in my Javascript i used the following to add an inline onclick handler:
$(element).attr('onclick','myFunction()');
To remove this at a later point from Javascript I used the following:
$(element).prop('onclick',null);
This is the way it worked for me to bind and unbind click events dinamically in Javascript. Remember NOT to insert any inline onclick handler in your elements.
3 Comments
Stachu
I like this, but why would the one be prop and the other attr?
bboydflo
I am not sure, but the way I see this is that with attr you add/inject onclick handler with the corresponding myFunction() and the prop('onclick',null) removes the attribute, so no function will be called. This is the way it worked for me. And i could notice how the element had onclick handler via attr and how it was removed after prop.
JDB
For future reference, you should really be using
.on('click', myFunction) (note that myFunction is not in quotes) and then, later, .off('click')What if onclick event is not directly on element, but from parent element? This should work:
$(".noclick").attr('onclick','').unbind('click');
$(".noclick").click(function(e){
e.preventDefault();
e.stopPropagation();
return false;
});
1 Comment
Frederic Leitenberger
Adding another click-listener (to prevent default, etc.) might add it to the end of the listener list and thus the other listeners would still be executed first. I'm not sure though if it is added first or last to the list. Anyway it is better to use 'off' as seen in other answers.
Try this if you unbind the onclick event by ID Then use:
$('#youLinkID').attr('onclick','').unbind('click');
Try this if you unbind the onclick event by Class Then use:
$('.className').attr('onclick','').unbind('click');
$('#myimage').off('click');