64

Given the following HTML fragment:

<form id="aspnetForm" onsubmit="alert('On Submit Run!'); return true;">

I need to remove/clear the handler for the onsubmit event and register my own using jQuery or any other flavor of JavaScript usage.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129

6 Answers6

87

To do this without any libraries:

document.getElementById("aspnetForm").onsubmit = null;
jiggy
  • 3,828
  • 1
  • 25
  • 40
  • I may have spoke to soon - this does not appear to work on IE 6 or 7. It reports an error: "Not implemented". –  Apr 29 '09 at 20:07
  • 8
    Hmm... does it work if you set it to null instead of undefined? Although undefined *should* be the correct setting, null may work. – Powerlord Apr 29 '09 at 20:15
  • out of curiosity, will setting object.eventhandler=null return 'undefined' as typeof object.eventhandler? – anonymous-one Jul 26 '11 at 14:12
  • 2
    `document.getElementById("aspnetForm").removeAttribute('onsubmit')` – Rudie Aug 21 '11 at 19:58
  • What about setting it to `''`? I’ve seen that numerous times in place of `null`. Is either better? – Synetech Jun 04 '13 at 01:57
  • Only removeAttribute worked in Chrome (Tampermonkey). I didn't try `undefined`, but I did try `delete`. – Grault Sep 16 '13 at 21:47
26

With jQuery

$('#aspnetForm').unbind('submit');

And then proceed to add your own.

Peter Bailey
  • 105,256
  • 31
  • 182
  • 206
11

Try this, this is working for me:

$('#aspnetForm').removeAttr('onsubmit').submit(function() {   
    alert("My new submit function justexecuted!"); 
});

See this for more details.

Ryan
  • 111
  • 1
  • 2
6

This is an ancient question now, but given that the major browsers have all abandoned EventTarget.getEventListeners(), here's a way to remove ALL event handlers on the element and its children and retain only the HTML structure. We simply clone the element and replace it:

let e = document.querySelector('selector');
let clone = e.cloneNode(true);
e.replaceWith(clone);

This is just as much of a hack as preempting the addEventListener() prototype with a method that keeps track of every handler function, but at least this can be used after the DOM is already wired up with another script's events.

This also works about the same as above using jQuery's clone() instead of cloneNode():

let original = $('#my-div');
let clone = original.clone();
original.replaceWith(clone);

This pattern will effectively leave no event handlers on the element or its child nodes unless they were defined with an "on" attribute like onclick="foo()".

bburhans
  • 539
  • 3
  • 12
Aakash
  • 21,375
  • 7
  • 100
  • 81
3

For jQuery, off() removes all event handlers added by jQuery from it.

$('#aspnetForm').off();

Calling .off() with no arguments removes all handlers attached to the elements.

zwcloud
  • 4,546
  • 3
  • 40
  • 69
  • This only removes event handlers that were added using jQuery. Any event handlers added using vanilla JS or by any other method won't be removed. – beliha Aug 15 '18 at 05:53
2

For jQuery, if you are binding event handlers with .live, you can use .die to unbind all instances that were bound with .live.

Brian DiCasa
  • 9,369
  • 18
  • 65
  • 97
  • [`.die()` is deprecated](http://stackoverflow.com/questions/803936/how-to-clear-remove-javascript-event-handler#comment27087086_803946) – ivan_pozdeev Nov 19 '16 at 02:06