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行為是正確的，因為標簽應與一個元素相關。