jquery - странное поведение при добавлении ввода

Question

Большая часть кода работает, как и ожидалось, но я получаю необычное поведение в очень специфических обстоятельствах, в которых я полностью запутался ...

Я перемещаю элементы из div в div в зависимости от класса выбранного. У меня все это работает ...

Сейчас я пытаюсь реализовать поле ввода, которое будет принимать значение, создавать из него элемент <li> и добавлять его к другому элементу div. У меня это тоже работает.

Проблема, с которой я сталкиваюсь, заключается в том, что я получаю дополнительный пробел, добавленный, если я щелкаю из поля ввода, а затем возвращаюсь в него и добавляю что-то ... Я вижу (в ссылке jsfiddle), что он вставляет 2 запятых, и, вероятно, поэтому я получаю дополнительный пробел, но я не могу точно определить, где это происходит ...

Я пытаюсь добиться следующего:

1. Пользователь вводит текст во ввод поле и хиты вводят. <- работает </li>
2. <li> элемент создан (с класс "ун") и добавлен в уль # выбран. <- работает </li>
3. Если пользователь нажимает на <li class="oon">, это удалено <- работает </li>

Проблема

1. Я щелкаю в поле ввода и введите текст и нажмите Enter. Если я оставайтесь в поле ввода и сохраняйте набрав значения и нажав ввод, это всегда работает как положено.
2. Я нажимаю на другой элемент с класс "addable". Это добавляется как и ожидалось.
3. Я возвращаюсь к поле ввода и введите текст и нажмите ввод. Теперь, что я набрал в добавляется так же, как это в проблеме (1), но это также добавляет дополнительный элемент li с пустым идентификатор и без текста

За чей-то комментарий я разместил код здесь: http://jsfiddle.net/vvF7v/11/

Answer 1

Если вы нажмете две надстройки, вы получите 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();
                        });
                    }
            });

Answer 2

Вы повторно связываете событие нажатия клавиши каждый раз, когда пользователь нажимает «li».Таким образом, каждый раз, когда вы проходите шаги 1-3, он добавляет к количеству добавляемых пустых строк '

Попробуйте: