JQuery .on（“ mouseover”）方法不适用于IE

Question

我试图在鼠标悬停时返回动态填充的select选项的值。 您可能通过ID可以看出，select选项是由ASP.NET列表框创建的。

$("#MainContent_LocationListBox").on("mouseover", "option", function () {

    alert($(this).val());
});

此方法适用于Chrome，但不适用于IE 11。

我一直在尝试其他人的解决方案来解决类似的问题，但是没有运气。

我尝试过的

• 不同版本的JQuery（当前为1.8.3）
• .live方法
• $(document).on("mouseover", "option", function ()
• $("#MainContent_LocationListBox option").on("mouseover", null, function ()
• 遍历选择选项并将鼠标悬停绑定到每个选项
• 添加<meta http-equiv="X-UA-Compatible" content="IE=edge"> （我发现的几篇文章的建议）

我也试过$("#MainContent_LocationListBox option:hover").val() ，但是效果非常不一致。

我已打开Internet Explorer调试，但未返回任何错误。

Answer 1

您可以使用mousemove而不是mouseover 。 以下代码可在Internet Explorer，Firefox和Chrome中运行：

更新 ：由于在Windows 10上的测试失败，因此在这里给出了建议之后，我添加了setTimeout调用：

$(document).ready(function () {
    var prevValue = null;

    $("#MainContent_LocationListBox").mousemove(function () {
        setTimeout(function () {
            var val = $('option:hover', $("#MainContent_LocationListBox")).val();

            if (typeof val !== 'undefined') {
                if (val !== prevValue) {
                    console.log(val); // To be replaced by actual processing
                    prevValue = val;
                }
            }
            else {
                prevValue = null;
            }
        }, 0);
    });
});

在调试鼠标事件时，与弹出alert框相比，我更喜欢在控制台中记录值（可以使用F12显示）。

Answer 2

与其将事件委托添加到select选项，不如将事件委托添加到select。

$("#MainContent_LocationListBox").on("mouseover", function () {
  alert($(this).val());
});

或者，如果您希望进行事件委托

$("section").on("mouseover", "#MainContent_LocationListBox", function () {
  alert($(this).val());
});

编辑：我认为您误解了如何从选择框中获取值。 使用jQuery时，可以在选择框上使用$('select').val() 。

有关使用jQuery .on（） http://api.jquery.com/on/的事件委派的更多信息