Can I Remove Inline Event Handlers Using Jquery?

I have some HTML with an onclick attribute. I want to override that attribute using jQuery. Is there any way to remove the click handler using jQuery? Using unbind doesn't work.

Solution 1:

Try the .removeAttr() function:

$(function() {
    $('a').removeAttr('onclick');
});

​ jsfiddle demo.

Once you've got rid of the onclick attribute you could attach your own click handler.

Solution 2:

$("#theElement")[0].onclick = function() {
  whatever();
};
// -- or --
$("#theElement")[0].onclick = null;

It's not that jQuery would make the standard DOM functions and properties go away. ;-)

Solution 3:

As quoted in http://api.jquery.com/prop/ Removing an inline onclick event handler using .removeAttr() doesn't achieve the desired effect in Internet Explorer 8, 9 and 11. To avoid potential problems, use .prop() instead.

So this can be done as

$(function() {
    $('a').prop('onclick', false);
});

Solution 4:

There is a plugin for it, but you should only do this when you really need to. The plugin gives you the option to call the old function or to ignore it entirely.

jQuery Override Plugin

$(divElementObj).override('onclick', 'click', function(...));

Solution 5:

Tried given options but worked partially as they removed one but not all.

Instead I tried following chaining as workaround. I am using ver 1.4.2.

jQuery("selector")
    .removeAttr("onclick").removeAttr("onmouseout").removeAttr("onmouseover");