jQuery - 选择更改事件会导致选择框在 IE10 和 FF 中立即再次关闭

jQuery - select on change event causes select-box to instantly close again in IE10 and FF

本文关键字：选择 FF IE10 事件 jQuery      更新时间：2023-09-26

我在将jQuery"on change"事件绑定到IE10和（各种）Firefox版本中的<select>框时遇到了一个非常奇怪和烦人的问题。
此问题不会出现在 Chrome 或 IE11 中。

单击选择框后打开的下拉菜单会立即再次关闭，但前提是绑定了"更改时"事件。
我在这里使用了相当标准的jquery例程：

$(document).on("change", "#kp_gebdat_y, #kp_gebdat_m, #kp_gebdat_d", function () {
    var year = $("#kp_gebdat_y").val();
    var month = $("#kp_gebdat_m").val();
    var day = $("#kp_gebdat_d").val();
    $("#kp_gebdat").val(year + "-" + month + "-" + day);
});

我已经尝试过弄乱preventDefault()但这不会改变。 似乎在IE10中单击任何保管框后，第一个下拉列表是"聚焦"的。

下面是一个JSFiddle，它在IE10和FF中也重现了这个问题：http://jsfiddle.net/northkildonan/7zyw2nff/1/

任何帮助将不胜感激！

如上面的评论所述，问题不在于 jQuery 或 JavaScript 事件处理程序，而在于标记本身。选择字段嵌套在标签标签内：

<label>
    <select type="text">
        <option value="0">Tag</option>
        [...]   
    </select>
    <select type="text">
        <option value="0">Monat</option>
        [...]   
    </select>
    <select type="text">
        <option value="0">Jahr</option>
        [...]   
    </select>   
</label>

这就是导致错误的原因：如果您聚焦第二个或第三个选择字段，则事件将委托给标签，该标签（在 FF 中）绑定到第一个表单字段子级 - 您的第一个选择字段并聚焦它 - 并且该焦点会导致同一标签内的第二个 + 第三个选择字段立即模糊。因此，您可以完全删除标签，也可以将每个选择嵌套在自己的标签中：

<label>
    <select type="text">
        <option value="0">Tag</option>
        [...]   
    </select>
</label>
<label>
   [...]
</label>

我认为最后FF行为是正确的，因为标签应该与一个元素相关。

相关文章：