Question

我的jQuery函数有一个问题。首先，我将解释我想要做的事情。

我在div中有两个元素，即p元素和input元素。元素p是可见的，输入元素保持隐藏状态。当用户点击p元素时，输入元素将出现（显示和焦点），p元素将消失（隐藏）。当输入字段出现时，如果用户键入内容并按Enter键，则将添加新的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次点击）时，当我输入内容并按回车键时，三个li元素被添加到我的菜单中。它就像一个循环，它计算我的点击次数并集中注意力，当我输入内容时，它会增加元素的数量。有人可以帮我这个吗？如果可能的话，请教我为什么会这样？

Answer 1

试试这个

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 2

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

Answer 3

当您拨打此代码时：

$('#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不会覆盖现有的事件处理程序 - 每次调用该段代码时，都会向元素添加一个新的事件处理程序。

并且，由于该代码位于click元素的<p>事件处理程序中，因此每次单击该元素时，您都会获得keypress事件的附加处理程序。如果单击三次，则会有三个事件处理程序，按下某个键时将触发每个事件处理程序。

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

jQuery函数中的神秘循环

3 个答案: