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

I'm dynamically adding li elements to the page inside a ul via PHP.

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

Then using jquery, I created a custom keyboard navigation for the list (up and down).

$(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();
    }
});

But the background color of the list item reverts to #fff after a second. There is no css for the background color property, and I also tried other functions such as text() on the list items and they all keep reverting!

Here's part of the PHP code providing the li-s

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

}

Try replacing both instances of:

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

with:

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

jsFiddle here

And you can also replace these two lines:

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

with:

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

jsFiddle with chaining here