How to remove onclick with JQuery?
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>
jQuery - remove onclick from an element
You can use the removeAttr()
method:
Remove an attribute from each element in the set of matched elements.
$('#whatever').removeAttr('onclick')
$("#whatever").click(function() {
//do something
});
How to remove “onclick” with JQuery, so that it can be added again later?
I think you might be looking for the .off() method, which replaced unbind after it was deprecated a while back. In your code it would look like this:
$("#sq" + nextPossibleIndices[i]).off('click');
If you're having difficult with it not working, try double-checking that you're selecting the correct element. In a pinch you can confirm that at least the method (off) works by trying it in the Chrome/Firefox consoles and removing click bindings from everything ala: $('*').off('click');
You wouldn't want to use that in actual site code, of course.
jquery remove onclick event
You can use namespaces to unbind
a partiuclar click handler.
$("a").bind("click.pick1", function () {
alert('pick 1');
$(this).unbind("click.pick1");
}).bind("click.pick2", function () {
alert('pick 2');
});
Example on jsfiddle
Does unbind('click') remove onclick?
No it does not remove the onclick
event, as is demonstrated here.
Binded events are stored within jQuery objects, therefore, unbind
just removes the event from the jQuery object.
unbind
will only remove events that have been attached using the jQuery bind
method and/or the deprecated live
method.
If you want to reset the actual onclick
event using jQuery, then just use one of the following methods:
$('#myelement').attr('onclick','');
$('#myelement').removeAttr('onclick');
If you want to add an event to specifically the onclick
of an element (not bind a jQuery click event), then simply use the following:
$('#myelement').attr('onclick','alert(\'hello\')');
I would strongly disadvise the above method though as I am sure you can appreciate, adding a function to this would be a little tricky escaping all of the quotes...
In addition, might I advise you use the on
and off
jQuery methods instead. Whilst these are only available in newer versions of jQuery, they are the preferred method as stated here:
As of jQuery 1.7, the .on() method is the preferred method for
attaching event handlers to a document. For earlier versions, the
.bind() method is used for attaching an event handler directly to
elements. Handlers are attached to the currently selected elements in
the jQuery object, so those elements must exist at the point the call
to .bind() occurs. For more flexible event binding, see the discussion
of event delegation in .on() or .delegate().
See the following for more information:
- jQuery Attr Method
- jQuery Bind Method
- jQuery Unbind Method
- jQuery On Method
- jQuery Off Method
JQuery: Remove OnClick events from 'a' tags
You can try this:
$("a").removeAttr("onclick");
Edit Updating answer based on comments and jquery Docs:
Note: 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
Best way to do this:
$("a").prop("onclick", null);
JQuery removing li using onclick event
If you are using onclick
then you have to invoke the function with the reference since this
won't refer to clicked element(refers to window
object most commonly) and based on that remove that element.
Element creation:
let removeBtn = $('<button onclick = "removeElement(this)">X</button>');
Function :
function removeElement(ele) {
$(ele).parent().remove();
}
Or alternately you can use the existing function but bind event handler using jQuery after element creation.
let removeBtn = $('<button>X</button>');
removeElement.click(removeElement);
An another option would be event delegation which helps to handle events on dynamically created elements.
Dynamically generated button remove by onClick in jQuery
Try following code. Do you want to restore 'disabled': false
attribute after removing specified element?
$(".tag-item").click(function() { var btnid = $(this).data("id"); var btnname = $(this).data("name"); $("#article-tags").append("<button type='button' class='tag-selected ntdelbutton'>" + btnname + " <i class='fa fa-times-circle' aria-hidden='true'></i></button>"); $(this).css({ "background-color": "#DFE2E5", "color": "#ababab" }); $(this).attr("disabled", true); $(".ntdelbutton").click(function() { $(this).remove(); });});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="article-tags"></div>
<div> <button type="button" data-id="1" data-name="tag" class="tag-item">tag</button> <button type="button" data-id="2" data-name="tag2" class="tag-item"> tag2</button> <button type="button" data-id="3" data-name="tag3" class="tag-item">tag3</button> <button type="button" data-id="4" data-name="tag4" class="tag-item">tag4</button></div>
Related Topics
Absolute Position Is Not Working
Xpath to Match @Class Value and Element Value
How to Remove a Div But Keep Its Elements
Scale Image to Fit a Bounding Box
Css3 Transition Doesn't Work with Display Property
How to Post/Submit an Input Checkbox That Is Disabled
How to Prevent a Browser from Storing Passwords
HTML - Links Without Http Protocol
Custom Bullet Symbol for <Li> Elements in <Ul> That Is a Regular Character, and Not an Image
Make an HTML Svg Object Also a Clickable Link
Swift: Display HTML Data in a Label or Textview
Drawing Text to <Canvas> with @Font-Face Does Not Work at the First Time
CSS Background-Size: Cover Replacement for Mobile Safari