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

Question

我有一个非常奇怪和烦人的问题，将jQuery“更改时”事件绑定到<select>事件-IE10和（各种）firefox版本中的框。
在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/

任何帮助，将不胜感激！

Answer 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行为是正确的，因为标签应与一个元素相关。