Почему этот выбор добавляет дополнительную пустую опцию при запуске JS?

Question

У меня очень простая форма с lil bit jQuery внутри. То, что я хочу сделать, это показать ввод текста, если я выбрал конкретную опцию в поле выбора. На этом входе я хочу добавить новую опцию в поле выбора. Он отлично работает, если я не пытаюсь использовать его несколько раз. В первый раз все в порядке. Во второй раз он добавляет мне дополнительное поле с пустым значением и меткой. В 3-й раз он добавляет два пустых поля опций. И так далее ...

Я пытаюсь понять, почему, черт возьми, это происходит. Вот код превью и демо: http://jsfiddle.net/rx5orekb/ HTML:

<form action="#" class="source"> 
    <select id="source"> 
     <option value="none">None</option> 
     <option value="source-xyz">Source XYZ</option> 
     <option value="something-else">Something Else</option> 
     <option value="add-new">Add New Source</option> 
    </select> 
    <input type="text" placeholder="Type name and hit enter" value="" style="display: none" /> 
</form> 

JS:

var Form = { 
    addNewSource: function(form, select, newSource) { 
     select.hide(); 
     newSource.show().focus(); 

     form.on('submit', function(event) { 
      event.preventDefault(); 
      var label = newSource.val(), 
       html = '<option value="'+label+'">'+label+'</option>'; 

      select.show().find('option[value=add-new]').before(html); 
      select.val(label); 
      newSource.hide().val(''); 
     }); 
     return false; 
    }, 

    sourceAppendix: function() { 
     var select = $('.source').find('select'); 

     select.on('change', function() { 
      var v = $(this).val(), 
       form = $(this).parents('.source'), 
       newSource = form.find('input'); 

      if(v == 'add-new') { 
       Form.addNewSource(form, $(this), newSource); 
      } 
     }); 
    } 
} 

$(document).ready(function() { 
    Form.sourceAppendix(); 
}); 

Спасибо большое!

Answer 1

См http://jsfiddle.net/rx5orekb/1/

Это происходит потому, что каждый раз, когда есть новое событие изменения на выбор вы связываете для отправки формы. В первый раз, когда вы нажимаете «добавить новый», вы привязываетесь к форме submit, второй раз «добавить новый» выбран, вы привязываетесь, чтобы отправить submit 2 раза и так далее.

Использование

form.unbind('submit'); 

к отвязать представить в форме.

Answer 2

Каждый раз, когда вы звоните addNewSource(), вы связываете другого submit обработчик. Поэтому, если вы звоните addNewSource 4 раза, нажатие кнопки отправки запускает обработчик отправки 4 раза. И каждый из них добавит еще один вариант выбора.

Я не совсем уверен, чего вы пытаетесь достичь, ожидая отправки события перед добавлением новой опции в меню, поэтому я не уверен, как исправить код. Вы, вероятно, просто хочу, чтобы сразу добавить новую опцию:

addNewSource: function(form, select, newSource) { 
    select.hide(); 
    newSource.show().focus(); 
    var label = newSource.val(), 
     html = '<option value="'+label+'">'+label+'</option>'; 
     select.find('option[value=add-new]').before(html); 
}, 

.submit() обработчик должен быть связан на высшем уровне, а не внутри addNewSource.