jQuery函数中的神秘循环

Question

我的jQuery函数有一个问题。首先我会解释我正在尝试做什么。

我有一个div中的两个元素，即p元素和input元素。元素p是可见的，并且输入元素保持隐藏状态。当用户点击p元素时，输入元素将出现（显示和聚焦），p元素将消失（隐藏）。当输入字段出现时，如果用户键入内容并按下回车键，则会添加一个新的li元素。

这是我当前的代码：

function createFolder() { 
    // Should be a clickable element 
    $('#create p').click(function() { 

     // Hide the p element 
     $(this).hide(); 

     // Show and focus the createFolder (input field) 
     $('#createFolder').show().focus(); 

     // If press a key inside input field 
     $('#createFolder').keypress(function(event) { 
      // If this key is "enter" 
      if (event.keyCode == 13) { 
       // Add a new li element inside menu 
       $('#menu').append('<li class="expandable"><a href="#">' + $('#createFolder').val() + '</a></li>'); 
      } 
     }); 

     // Focus out the input field 
     $('#createFolder').focusout(function() { 
      // Hide the input field element 
      $(this).hide(); 
     }); 
    }); 
} 

http://i.imgur.com/HZoDr.png

但是我有一个问题，当我在p元素点击或出（3次点击，例如），当我输入的东西，然后按输入，三个李元素被添加到我的菜单。它就像一个循环，它计数我的点击并聚焦，当我键入内容时，它会添加这些元素。有人可以帮助我呢？如果可能的话，教我为什么会发生这种情况？

Answer 1

当调用此代码：

$('#createFolder').keypress(function(event) { 
    // If this key is "enter" 
    if (event.keyCode == 13) { 
     // Add a new li element inside menu 
     $('#menu').append('<li class="expandable"><a href="#">' + $('#createFolder').val() + '</a></li>'); 
    } 
}); 

您添加一个新的事件处理程序keypress事件该元素。重要的一点是加入，jQuery不会覆盖现有的事件处理程序 - 每次您调用这段代码时，都会向该元素添加新的事件处理程序。

而且，由于这些代码是你<p>元素click事件处理程序中，每次点击该元素的时候你得到的keypress事件的附加处理程序。如果你点击三次，你有三个事件处理程序，当你按下一个键时，每个事件处理程序都会触发。

最简单的解决方案就是简单地移动该代码，以将keypress事件处理程序绑定到<p>元素的click事件处理程序之外。

Answer 2

试试这个

var items = $('#menu').parent().children(".expandable").length; 
if(items > 0){ 
//skip doing what you are doing. 
}else{ 
$('#menu').append('<li class="expandable"><a href="#">' + $('#createFolder').val() + '</a></li>'); 
} 

Answer 3

$('#menu').html('<li class="expandable"><a href="#">' + $('#createFolder').val() + '</a></li>');