I try to answer this question a few minutes ago and prepared this example for myself :

<script>
  function trialMethod()
  {
    alert('On Submit Run!'); return true;
  }
  function trialMethod2()
  {
    alert('On Submit Run trialMethod2!'); return true;
  }
</script>

<form id="aspnetForm" onsubmit="trialMethod();">
    <input type="submit">
</form>

Why the first unbind doesn't work :

<input type="button" id="btnTrial1" value="UNBIND 1" 
   onclick="$('#aspnetForm').unbind('submit', trialMethod);">

But this one works for the trialMethod2 method :

<input type="button" id="btnTrial2" value="UNBIND 2" 
   onclick="$('#aspnetForm').bind('submit', trialMethod2).unbind('submit', trialMethod2);">

I try to answer this question a few minutes ago and prepared this example for myself :

<script>
  function trialMethod()
  {
    alert('On Submit Run!'); return true;
  }
  function trialMethod2()
  {
    alert('On Submit Run trialMethod2!'); return true;
  }
</script>

<form id="aspnetForm" onsubmit="trialMethod();">
    <input type="submit">
</form>

Why the first unbind doesn't work :

<input type="button" id="btnTrial1" value="UNBIND 1" 
   onclick="$('#aspnetForm').unbind('submit', trialMethod);">

But this one works for the trialMethod2 method :

<input type="button" id="btnTrial2" value="UNBIND 2" 
   onclick="$('#aspnetForm').bind('submit', trialMethod2).unbind('submit', trialMethod2);">

• javascript
• jquery
• jquery-events

6 Answers 6

The first unbind scenario doesn't work, because of jQuery's event model. jQuery stores every event handler function in an array that you can access via $("#foo").data('events'). The unbind function looks just for given function in this array. So, you can only unbind() event handlers that were added with bind()

No one should ever mix their markup with their interaction code if they are using jQuery.

Add some javascript to the page like this:

$(function() {
    $('#aspnetForm').bind('submit',function() {
        trialMethod();
    });
    $('#btnTrial2').bind('click',function() {
        $('#aspnetForm').unbind('submit');
    });
    $('#btnTrial2').bind('click',function() {
        $('#aspnetForm').bind('submit', trialMethod2).unbind('submit');
    });
});

Now, with that out of the way... Everything should work now (even though you will now be double-binding the #aspnetForm before unbinding it completely when the second button is pressed). The problem was that the form was never really 'bound' to begin with. You can unbind onsubmit parameters in the markup.

You can unbind by removing the corresponding attribute:

 $('#aspnetForm').removeAttr('onsubmit');

I ran into a similar issue before. What I concluded was that you can only unbind a method you have binded. Since trialmethod() was NOT binded through jquery, calling unbind on the method wouldnt work.

Please let us know if you figure it out by any chance.

Thanks.

There is a bug with bind, unbind and form submit action :

If you bind then unbind, and you want to submit your form, you cannot use $(form).submit(), BUT $(form INPUT[type=submit]).click() !

As far as I can see in jQuery API documentation, unbind() has been deprecated: https://api.jquery.com/unbind/

As of jQuery 3.0, .unbind() has been deprecated. It was superseded by the .off() method since jQuery 1.7, so its use was already discouraged.

And off() method should be used instead.