Unbind jQuery even handler

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

score 13 · Accepted Answer · edited Jun 30 '19 at 15:48

13

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

edited Jun 30 '19 at 15:48

Max Segal

1,955
1
24
53

answered Apr 29 '09 at 20:37

Rafael

18,349
5
58
67

score 5 · Answer 2 · answered Apr 29 '09 at 20:28

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.

No one should ever mix their markup with their interaction code, full stop. — eyelidlessness, May 01 '09 at 05:31
Indeed, they should never be combined. Period. *Especially* if you are using jQuery :D. — KyleFarris, May 01 '09 at 15:00

score 3 · Answer 3 · edited Jun 30 '19 at 15:48

3

You can unbind by removing the corresponding attribute:

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

edited Jun 30 '19 at 15:48

Max Segal

1,955
1
24
53

answered Dec 25 '10 at 00:02

Yuki SHIDA

31
2

score 1 · Answer 4 · answered Apr 29 '09 at 20:20

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.

score 1 · Answer 5 · edited Nov 17 '11 at 17:51

1

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

edited Nov 17 '11 at 17:51

Martin Buberl

45,844
25
100
144

answered Nov 17 '11 at 16:30

Tom

11
1

score 0 · Answer 6 · answered Dec 06 '19 at 14:33

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.

Unbind jQuery even handler

6 Answers6

Linked