jQuery's delegate conflict with another delegate in IE

1.8k Views Asked by At

It seems that in IE, some delegates may somehow cause another delegate to fail to work.

This is one possible case:

<html>
 <head>
  <script src='jquery-1.4.2.min.js'></script>
  <script>
   $(function() {
    $('#main')
    .delegate('div', 'click', function() {
     alert('on div!');
    })
    .delegate('[name=first]', 'change', function() {
     alert('first!');
    })
    .delegate('[name=second]', 'change', function() {
     alert('second!');
    })
    ;
   });
  </script>
 </head>
 <body>
  <div id="main">
   <input name="first" />
   <input name="second" type="checkbox" />
   <div>Test</div>
  </div>
 </body>
</html>

In this particular case, the handler for the checkbox won't fire.

As usual, the problem doesn't show up in other browsers.

Changing the call orders may solve an issue , but at the risk of causing another. Note that the delegate works on mutually exclusive elements so the order should be irrelevant.

What causes this?

3

There are 3 best solutions below

0
On BEST ANSWER

It seems that the problem has been resolved in the latest version of jQuery or Internet-Explorer (as of this writing, 1.5 and 9, respectively).

0
On

I ran into this as well. For some reason, reversing the order of registering the events fixed it for me. I'd love an explanation though.

0
On

I cannot offer an explanation; but I have encountered similar behavior in IE8. Oddly, in my case everything worked well if I rearranged bindings so that the delegate binding on one of my checkboxes came before delegate bindings on other form elements. A delegated click handler on a link before the checkbox handler did not seem to cause problems.

In my case I had one click handler on a checkbox, two change handlers on select boxes, two click handlers on radio buttons, another click handler on another class of checkboxes, and several click handlers on links.

There are a lot of variables to account for and it is difficult to account for all of them here. For example, the delegated selector for the checkbox that caused a problem for me was an id selector while the selector for the innocuous checkboxes was a class.