jquery - 来自另一个处理程序的 jQuery On()

Question

我有这个 js Fiddle ..

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

如果您在文本框内单击并按回车键，则会获得一组选项，您可以使用向上和向下箭头浏览项目。

如果您单击添加链接然后尝试导航，您只能通过静态预定义的导航。你能帮我找到解决这个问题的方法吗？

谢谢

完整代码如下

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>");