Блог

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

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

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

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

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

1. Пользователь вводит текст в поле ввода и нажимает enter. <— работает
2. Создается <li> элемент (с классом «oon») и добавляется к ul#selected. <— работает
3. Если пользователь нажимает на <li class="oon"> , он удаляется <— работает

Проблема

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

Согласно чьему-то комментарию, я разместил код здесь: http://jsfiddle.net/vvF7v/11 /

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

Попробуйте это:

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

Если вы нажмете на два ‘добавляемых’, вы получите 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();
                        });
                    }
            });