为什么jQuery删除是在下拉菜单中添加一个额外的元素？ [英] Why the jQuery remove is adding an extra element in the dropdown?

问题描述

请参阅

See this fiddle..

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');
    });
});

When I run the above code in google Chrome(latest version), the first element is removed but it appends an extra element at the bottom. Why is it behaving like that.

Any ideas? pretty unexpected ..

EDIT:

This picture is for the ones who are not able to see any error..

解决方案

Looks like a rendering bug in Chrome. You can't actually click on the last hey5 and the DOM doesn't actually create a second one. You can get around this via mousedown:

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

jsFiddle example

这篇关于为什么jQuery删除是在下拉菜单中添加一个额外的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！