javascript - 为什么 jQuery 删除在下拉列表中添加了一个额外的元素？

Question

看到这个小提琴..

HTML：

<select>
    <option>hey1</option>
    <option>hey2</option>
    <option>hey3</option>
    <option>hey4</option>
    <option>hey5</option>    
</select>

jQuery：

$(document).ready(function () {
    $('select').on('click',function(){
        $("option:first",this).remove();
        $(this).unbind('click');
    });
});

当我在谷歌浏览器（最新版本）中运行上述代码时，第一个元素被删除，但它在底部附加了一个额外的元素。为什么会有这样的行为。

有任何想法吗？很意外..

编辑：

这张照片是给那些看不到任何错误的人的。

Answer 1

看起来像 Chrome 中的渲染错误。您实际上不能单击最后一个 hey5 并且 DOM 实际上并没有创建第二个。您可以通过 mousedown 解决此问题：

$('select').one('mousedown',function(){
    $("option:first",this).remove();
});

jsFiddle 示例

Answer 2

我很确定这是一个错误，另一个修复是使用focus事件：

$('select').on('focus', function(){
    $("option:first", this).remove();
    $(this).unbind('focus');
});

小提琴：http: //jsfiddle.net/F8E7L/