Question

this code/markup in conjunction with a php script renders a multiple select input populated with options set to
files via a php script. The goal is when a user clicks on an option, the text file is read and output to a div $(“#txtbx”).
This works as planned in mozilla firefox, however ie9 does nothing, no error no output.
As you can see by the comments i’ve located the ofending piece of code. It is not an .each() issue as I first thought, nor is it a selector issue (i’ve referenced it directly by class: see the comment). Neither is it $(this) i’ve also tested that… it seems to be the event being attached to $(this) or the event itself. Where the ouput goes is irrelevant because it doesn’t make it past $(this).click(f). Any idea what is happening here?

<div id="txtbx">
</div>

<select id="REFselect" size="1">
<option class="REFoptions" value="./TXT/css.txt">css.txt</option>
<option class="REFoptions" value="./TXT/dns.txt">dns.txt</option>
</select>

$("#REFselect option").each(function () {
    $(this).click(function(){
        alert("test")
        /*
        $("#txtbx").load($(this).val(),function(responseTxt,statusTxt,xhr){
            $(this).html("<pre>"+responseTxt+"</pre>");
            if(statusTxt=="success")
              alert("External content loaded successfully!");
            if(statusTxt=="error")
              alert("Error: "+xhr.status+": "+xhr.statusText);

        });
        */
    });
});

This is the working code, I’m new to the site so I want to thank everyone for their answers they were very good. I don’t know how to award proper credit, I’m researching that.
Also I would love to know why the old code worked in FF and not IE.

$("#REFselect").change(function(){
        var select = $(this).val();

        $("#txtbx").load(select,function(responseTxt,statusTxt,xhr){
            $(this).html("<pre>"+responseTxt+"</pre>");
            if(statusTxt=="success")
              alert("External content loaded successfully!");
            if(statusTxt=="error")
              alert("Error: "+xhr.status+": "+xhr.statusText);  
        });
});

Answer 1

You’re tying your .click handler to the <option> elements (which do not have a click event to handle).

Try setting it to the .change event of the <select> element.

$("#REFselect").change(function (e) {
    alert("test")
    $("#txtbx").load($(this).val(), function (responseTxt, statusTxt, xhr) {
        $(this).html("<pre>" + responseTxt + "</pre>");
        if (statusTxt == "success") {
            alert("External content loaded successfully!");
        }
        if (statusTxt == "error") {
            alert("Error: " + xhr.status + ": " + xhr.statusText);
        }
    });
});