Question

Since I’m creating a HTA code I’m stuck with IE 🙁

We needed to trap the change event in a <select> element, but guess what, IE does not support that event.

So I created a way to mimic it. With a <input type="text"> that when it is being click show the <select> just below. That part works fine. The problem is, I want to hide the select when the user click outside the select.

I tried to catch a click on the body, it works fine the first time but the second time the select gets hidden try away.

Here a simplify version of the code:

$('.product').live('click',function(){
    // Show the <select id="select"> code goes here

    // this is the event to close the select
    $('body').die().live('click', function(){ $('#select').fadeOut(250); return;});

    // get the click on the select element
    $('#select').die().live('click',function(){
       // kill the close the select
       // THIS IS THE .die() THAT DOES NOT WORK
       $('body').die();

});

Question
Is there something wrong with this code? OR is there a better way to do this? Remember I’m stuck with IE.

Answer 1

Internet Explorer 7 and up (and probably 6, since IE7 is mostly IE6 with lipstick, but I can’t test that easily) do support the change event. Here is a jsfiddle with a really simple demo.

It’s definitely true that IE does weird things with events. For example, “change” won’t bubble (from <select> at least, and probably other things), but jQuery patches over that for you. Also there’s the classic issue with checkboxes and radio buttons, which don’t fire “change” until they lose focus (which makes it basically useless). For those, I find that “click” works fine.