'IE issues with 'focus' event

I have an app that must run in IE 7/8(compat). (I know, right?)

The app includes the following functionality....

If I click on a dropdown list, the list checks some values elsewhere and, depending on the number of matches it finds it enables or disables some of the options. I make this happen using the focus event of the dropdown list.

If I run this code in a real browser, it works fine. If I run it in IE7 or 8 with compatibility mode enabled, I have to click the DDL twice; the first time fires my focus event code and the 2nd to get it to drop down.

The markup:

<!DOCTYPE html>
  <html>
    <head>
      <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
  
    <body>
      <select id="aa">
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
        <option>E</option>
        <option>F</option>
        <option>G</option>
      </select>
      
      <script src="script.js"></script>
    </body>
  </html>

The JS:

$("#aa").focus(function() {
  var countSelectedEvents = 2;
  var kids = $("#aa").children("option");
  kids.removeAttr("disabled");
  kids.removeAttr("title");

  if (countSelectedEvents == 0) {
    kids.slice(1).attr("disabled", "disabled");
    kids.slice(1).attr("title", "This option is only available if one or more Events are selected");
    kids.slice(4).attr("title", "This option is only available if exactly ONE Event is selected");
  } else if (countSelectedEvents > 1) {
    kids.slice(4).attr("disabled", "disabled");
    kids.slice(4).attr("title", "This option is only available if exactly ONE Event is selected");
  }
  return true;
});

For convenience, you can find this code on plnkr. If anyone knows how I can get the DDL to drop open on the first click, I'd love to hear about it.

UPDATE:
This question here on Stack Overflow suggests triggering the focusout event, but that doesn't work either.

UPDATE II
It seems that this is a more generic IE error. It doesn't work in native mod in IE11 either! :-(

javascripthtmljqueryinternet-explorerjquery-events


Solution 1:[1]

You have an extra opening bracket { in your .focus() function event. That's probably breaking your code.

Instead of .focus(function(){{}) , should be .focus(function(){})

(in other words, remove line 2 in your JS example and should be set)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Control Freak

Related Questions