jquery - 別のハンドラーからの jQuery On()

Question

私はこのjsフィドルを持っています..

http://jsfiddle.net/E7MSN/101/

テキスト ボックス内をクリックして Return キーを押すと、一連のオプションが表示され、上下の矢印を使用して項目間を移動できます。

ADD リンクをクリックしてナビゲートしようとすると、事前定義された静的なリンクのみをナビゲートできます。これを回避する方法を見つけるのを手伝ってもらえますか?

ありがとう

以下の完全なコード

HTML

<input type="text" id="autofill"/>
    <a href='#' class='add'>ADD</a>
 <div class="services">
<div class="items">
    <ul>                           
        <li class="mail-icon selected"><a href="#" id="mail">mail</a></li>
        <li class="forum-icon"><a href="#" id="forum">lang</a></li>
        <li class="chat-icon"><a href="#" id="chat">chat</a></li>
    </ul>
</div>
</div>

JS

 $(document).ready(function () {

 $(".add").click(function(){
      $(".items").append("<li>Item</li>");
 });

 });


 $("#autofill").keydown(function(e) {
     if (e.keyCode == 13) { // enter
         if ($(".services").is(":visible")) {
             selectOption();
         } else {
             $(".services").show();
         }
         menuOpen = !menuOpen;
     }
     if (e.keyCode == 38) { // up
         var selected = $(".selected");
         $(".services li").removeClass("selected");
         if (selected.prev().length == 0) {
             selected.parent().children().last().addClass("selected");
         } else {
             selected.prev().addClass("selected");
         }
     }
     if (e.keyCode == 40) { // down
         var selected = $(".selected");
         $(".services li").removeClass("selected");
         if (selected.next().length == 0) {
             selected.parent().children().first().addClass("selected");
         } else {
             selected.next().addClass("selected");
         }
     }
 });

 $(".services li").mouseover(function() {
     $(".services li").removeClass("selected");
     $(this).addClass("selected");
 }).click(function() {
     selectOption();
}); 

function selectOption() {
    $("#autofill").val($(".selected a").text());
    $(".services").hide();
}

Answer 1

交換：

$(".services li").mouseover(function ... )

と

$('.services').on('mouseover', 'li', function... )

Answer 2

、置換のli後に追加しています...ul

$(".items").append("<li>Item</li>");

と

$(".items ul").append("<li>Item</li>");