对动态添加的元素所做的更改会自动恢复

Question

我通过PHP动态地将li元素添加到ul内的页面。

<ul class="auto-suggest-list" id="theul"></ul>

然后使用jquery，我为列表创建了一个自定义键盘导航（向上和向下）。

$(document).on('keyup', '.auto-suggest-textbox', function(e) {
    if($(this).val() != ''){
        $('.auto-suggest-list').slideDown();

        if(e.which == 38){
            position--;
            $('.auto-suggest-list').css('background-color','#fff');
            $('.auto-suggest-list li:nth-child(' + position + ')').css('background-color','#ddd');
        }
        else if(e.which == 40){
            position++;
            $('.auto-suggest-list').css('background-color','#fff');
            $('.auto-suggest-list li:nth-child(' + position + ')').css('background-color','#ddd');
        }

    }
    else if($(this).val() == ''){
        $('.auto-suggest-list').slideUp();
    }
});

但是列表项的背景颜色会在一秒后恢复为#fff。背景颜色属性没有css，我还在列表项上尝试了text()等其他功能，它们都保持还原！

这是提供li-s

的PHP代码的一部分

while($row=mysql_fetch_array($query_run)){
echo '<li>';
echo '<input type="hidden" value="'.$row['reciever_id'].'" name="recipients[]" />';
echo '<span>'.get_user_field('first_name',$row['reciever_id']).' '.get_user_field('last_name',$row['reciever_id']).'</span>';
echo '</li>';

}

Answer 1

尝试替换以下两个实例：

$('.auto-suggest-list').css('background-color','#fff');

使用：

$('.auto-suggest-list li').css('background-color','#fff');

jsFiddle here

---

你也可以替换这两行：

$('.auto-suggest-list li').css('background-color','#fff');
$('.auto-suggest-list li:nth-child(' + position + ')').css('background-color','#ddd');

使用：

$('.auto-suggest-list li').css('background-color','#fff')
    .eq(position-1).css('background-color','#ddd');

jsFiddle with chaining here