$(this).click() Internet Explorer 问题

Question

此代码/标记与 php 脚本一起呈现一个多选输入，其中填充了选项设置为 文件通过 php 脚本。目标是当用户单击一个选项时，读取文本文件并将其输出到 div $("#txtbx")。 这在 Mozilla firefox 中按计划工作，但是 ie9 什么都不做，没有错误没有输出。 正如您从 cmets 中看到的那样，我已经找到了问题的代码。这不是我最初想到的 .each() 问题，也不是选择器问题（我直接按类引用了它：见评论）。也不是 $(this) 我也测试过......它似乎是附加到 $(this) 的事件或事件本身。输出的去向无关紧要，因为它不会超过 $(this).click(f)。知道这里发生了什么吗？

<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);

        });
        */
    });
});

这是工作代码，我是该网站的新手，所以我要感谢大家的回答，他们非常好。我不知道如何授予适当的信用，我正在研究。 我也很想知道为什么旧代码在 FF 而不是 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

您将.click 处理程序绑定到<option> 元素（没有要处理的click 事件）。

尝试将其设置为<select> 元素的.change 事件。

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

Answer 2

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

    });
});

您可以使用.on() 将事件绑定到选择标签的所有选项上！并按照 bfavaretto 的建议更改事件。

Answer 3

我认为这是内部的$(this)（应该是<option> 元素）。尝试使用change 事件直接从<select> 获取值：

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

     });
});