jquery - 附加输入的奇怪行为答案

【问题标题】：jquery - strange behavior on appending inputjquery - 附加输入的奇怪行为
【发布时间】：2011-05-01 05:30:33
【问题描述】：

大部分代码都按预期工作，但我在非常特殊的情况下遇到了一些不寻常的行为，我对此完全感到困惑......

我将元素从 div 移动到 div，具体取决于所选择的类。我已经完成了所有这些工作......

我现在正在尝试实现一个输入字段，它将接受一个值，从中创建一个<li> 元素，并将其附加到另一个 div。我也有这个工作。

我遇到的问题是，如果我点击输入字段然后返回并添加一些内容，我会不断添加一个额外的空白 li...我可以看到（在 jsfiddle 链接中）它正在插入2 个逗号，这可能就是为什么我会得到一个额外的空白 li，但我无法确定发生在哪里......

我正在努力实现以下目标：

用户在输入中输入文本字段和点击进入。
一个 <li> 元素被创建（带有 “oon”类）并附加到 ul#选择。
如果用户点击<li class="oon">，就是已移除

问题

点击输入栏，输入一些文字，然后按回车。如果我留在输入字段并保持输入值并按回车，它总是按预期工作。
我用 “可添加”类。这被附加了正如预期的那样。
我回到输入字段并输入一些文本和点击进入。现在，我输入的是就像在问题中一样附加 (1)，但它也增加了一个带有空的附加 li 元素 id，没有文字

根据某人的评论，我在此处发布了代码： http://jsfiddle.net/vvF7v/11/

【问题讨论】：

标签： jquery replace append

【解决方案1】：

每次用户单击“li”时，您都会重新绑定 keypress 事件。因此，每次执行步骤 1-3 时，它都会不断增加附加的空白 'li 的数量。

试试这个：

 $('input#add-oon').unbind('keypress').keypress(function(e) {

【讨论】：

【解决方案2】：

如果您点击两个“可添加”，您将获得 3 个逗号

问题是每次单击“li”时，如果该元素通过此测试，您将附加一个新的按键处理程序

if($(this).hasClass("custom-add")

只需附加一次

$('li').click(function() {
        if($(this).hasClass("addable")) {
            var myitemname = $(this).attr('id')+',';
            $("input#edit-recipients").val($("input#edit-recipients").val() + myitemname);
            $(this).removeClass("addable").addClass("removable").appendTo($("ul#selected"));
        } else if($(this).hasClass("removable")) {
            var myitemname = $(this).attr('id')+',';
            var currentValue = $("input#edit-recipients").val();
            currentValue = currentValue.replace(myitemname,"");
            $("input#edit-recipients").val(currentValue);
            $(this).removeClass("removable").addClass("addable").appendTo($("ul#iin"));
        } else if($(this).hasClass("oon-all")) {
            $('li.addable').each(function() {
                    var myitemname = $(this).attr('id')+',';
                    $("input#edit-recipients").val($("input#edit-recipients").val() + myitemname);
                    $(this).removeClass("addable").addClass("removable").appendTo($("ul#selected"));
                });
        }
    });
            $('input#add-oon').keypress(function(e) {
                    if(e.keyCode == 13) {
                        e.preventDefault();
                        var addValue = $('input#add-oon').val();
                        $('input#add-oon').val("");

                        var lid = addValue.replace(/ /g, "-");

                        $('input#edit-recipients').val($('input#edit-recipients').val() + addValue + ',');
                        var clone = $('#cloneable').html();
                        $elem = $(clone).find('div.realname').text(addValue).parent().parent().parent();

                        $('ul#selected').append($elem);
                        $('#'+lid).click(function() {
                                var currentValue = $("input#edit-recipients").val();
                                currentValue = currentValue.replace(addValue+',',"");
                                $("input#edit-recipients").val(currentValue);
                                $(this).remove();
                        });
                    }
            });

【讨论】：