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.

6 Answers 6

87

To do this without any libraries:

document.getElementById("aspnetForm").onsubmit = null;
6
  • I may have spoke to soon - this does not appear to work on IE 6 or 7. It reports an error: "Not implemented".
    – Jordan Terrell
    Apr 29, 2009 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, 2009 at 20:15
  • out of curiosity, will setting object.eventhandler=null return 'undefined' as typeof object.eventhandler? Jul 26, 2011 at 14:12
  • 2
    document.getElementById("aspnetForm").removeAttribute('onsubmit')
    – Rudie
    Aug 21, 2011 at 19:58
  • What about setting it to ''? I’ve seen that numerous times in place of null. Is either better?
    – Synetech
    Jun 4, 2013 at 1:57
26

With jQuery

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

And then proceed to add your own.

3
  • Then I'm not sure - it's the "jQuery way" to remove event listeners. Apr 29, 2009 at 20:05
  • 28
    You can only unbind event listeners that were added with jQuery's bind() method. Mar 5, 2010 at 2:52
  • 2
    instead you can use $.die('submit')
    – WooDzu
    Jul 14, 2011 at 7:26
11

Try this, this is working for me:

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

See this for more details.

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()".

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.

1
  • 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, 2018 at 5: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.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.