0

I have this code

    var option = new Option(thatOption.text, thatOption.value);
    $(option).click( function(){
                //Sorry cannot reveal what is here I'll just use this so that it can be referenced
                alert("clicked");
            }
        );

    try{
        selectBox.add(option,null);
    }catch(e){
        // Stupid IE doesn't know how to follow the spec
        selectBox.add(option);
    }

This code works in FF > 2 (don't have FF 1 oe FF 2 to test), Opera (presto), Chrome (webkit) and doesn't work on IE. When I click the option in the selectbox nothing happens. No event seems to be launched simply, nothing!
Question. How can I solve that?
Objective: (according to that code) make the alert appear
BTW: Why does that happen?
Extra note: The developer tools state that there are no errors involved.

brunoais
  • 5,392
  • 8
  • 34
  • 58
  • The code you posted seems to be fine. So you have to provide fully working code we could debug. You can use http://jsfiddle.net/ to put a live version of you code online. – styrr Oct 13 '11 at 20:55
  • Anyway, according to W3c:http://www.w3.org/TR/html4/interact/forms.html#edef-OPTION Placing click on an option tag is valid. – brunoais Oct 14 '11 at 05:18

1 Answers1

1

Why does that happen?

The root cause of this has been discussed a few times already on SO:

Older versions of IE simply don't support click events on <option> elements. Instead, you'll have to listen to the <select>'s change (or click) event:

$(selectBox).change(function () {
});

Regarding your specific task, to have the alert appear (or your actual code execute) only when that option is selected, you can test if the option is selected within the change event:

var option = new Option(thatOption.text, thatOption.value);

$(selectBox).change(function () {
    if ($(option).is(':selected')) {
        alert('clicked');
    }
});

If you don't have the option variable at the ready, you can instead test with the value of the <select>:

$(selectBox).change(function () {
    if ($(this).val() === 'something') {
        alert();
    }
});

Also, to avoid the try..catch and Stupid IE doesn't know how to follow the spec, you can do just:

$(selectBox).append(option);
Community
  • 1
  • 1
Jonathan Lonowski
  • 117,332
  • 31
  • 195
  • 197
  • part1: yep... Now I noticed it... When I was making the research I used the wrong keywords. part2: I have a spec to follow. The spec states that the click is to be made when the option is clicked, not when selected. I suppose the spec has to be changed so that I can do that for IE. Pls notice that only IE fails to follow that code. part3: I'm in favor of using external libraries as little as possible. jQuery works really well, but I prefer my won code using the native js API instead of the library API (tastes). – brunoais Oct 14 '11 at 05:24
  • @brunoais, I wrote a workaround here to simulate the click, that I think it could help you. You may check it here: http://stackoverflow.com/questions/15452103/jquery-select-change-event-when-selecting-the-same-value/21362300#21362300 – Federico J. Oct 10 '14 at 10:23
  • @Chococroc thanks. This is something I had solved differently, btw. I solved it in such way that it is not valid as an answer to this question. – brunoais Oct 10 '14 at 16:07