$ (this) .click () internet explorer problem

this code / markup combined with a PHP script displays a multiple selection filled with parameters set to files via a PHP script. The goal is when the user clicks on an option, the text file is read and output to div $ ("# txtbx"). This works as planned in Mozilla firefox, however ie9 does nothing, no error whatsoever. As you can see from the comments, I found a missing piece of code. This is not a .each () problem as I first thought, and not a selector problem (I referenced it directly by class: see comment). And it's not $ (this), I've also tested this ... it looks like the event is bound to $ (this) or the event itself. Where the exit occurs doesn't matter because it doesn't skip the value of $ (this) .click (f). Any idea what's going on 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 working code, I'm new to the site so I want to thank everyone for their answers, they were very good. I do not know how to award the proper credit, I am studying it. Also I would be interested 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);  
        });
});

      

+3


source to share


3 answers


You bind a handler .click

to elements <option>

(which do not have a handler click

).

Try setting it to an .change

element event <select>

.



$("#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);
        }
    });
});

      

+1


source


$("#REFselect").on("change", function() {
   $("#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);

    });
});

      



You can use .on()

to bind an event to all parameters of the select tag! and also change the event, as Bfavaretto suggested.

+1


source


I think it is internal $(this)

(presumably an element <option>

). Try to get the value directly from <select>

using an event change

:

$("#REFselect").change(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);

     });
});

      

+1


source







All Articles