Question

大多数代码都按预期工作，但是我在一个非常特殊的情况下会遇到一些不寻常的行为，我对它完全感到困惑......

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

我现在试图实现，将采取的值，在它外面创建<li>元素，并将它附加到另一个DIV的输入字段。我也有这个工作。

这是我遇到的问题是我不断收到额外的空白李小加，如果我点击了输入字段，然后回来，并添加东西...我可以看到（在的jsfiddle链接），它是将2个逗号，这可能就是为什么我会得到一个额外的空白，但我无法确定发生了什么......

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

用户在输入中输入文本场和命中输入。＆lt; - works
一种创建<li>元素（使用 “oon”类和附加到 UL＃选择。＆lt; - works
如果是用户点击<li class="oon">即可已删除＆lt; - works

问题

我点击输入字段输入一些文字然后按Enter键。如果我留在输入字段并保持键入值并按下输入，它始终按预期工作。
我点击另一个元素类“可添加”。这附加了正如所料。
我回到了输入字段并输入一些文本和打进去。现在，我输入的是附加就像在问题中一样（1），但它也增加了额外的li元素与空 id和没有文字

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

Answer 1

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

试试这个：

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

Answer 2

如果你点击两个'addable'，你会得到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();
                        });
                    }
            });

jquery - 附加输入的奇怪行为

2 个答案: