$ (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);
});
});
source to share
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);
}
});
});
source to share
$("#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.
source to share
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);
});
});
source to share