Why this unbind doesn't work ?

Question

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);">

Answer 1

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.

Answer 2

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.

Answer 3

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