Странное поведедение click
 

Всем привет.
Есть самая обычная HTML форм для ввода определенных записей. Может возникнуть необходимость в дополнительных полях для ввода однотипных данных. Как пример:
Тут (в примере выше), рисуется "+" и к нему определяется поведение при клике на нем(пример ниже).

<script>
$(document).ready(function() {
var i=2;
$("#more_subnets").click(function() {
more_subnet();
});
function more_subnet () {
      $("#more_subnets").append("<br>Подсеть: <input type='text' id='subnet"+i+"' name='subnet2'>");
      i = i+1;
   };
});
</script>

Всё хорошо. На странице выводится форма, рядом с полем, которое возможно придется продублировать, выводится "+", по клику на нем появляется еще одно поле для ввода и т.д.
Проблема заключается в том, что если я пытаюсь вводить что-то в это поле(добавленное), у меня добавляются еще поля, хотя я не кликаю на "+".
Почему действие которое привязано к "+" срабатывает и на вновь добавленных полях?

arty,
Замените append на after, т.к. append вставляет новое поле внутрь элемента span, найденного по id #more_subnets,
а onclick относится к span в целом

Dilettante_Pro
Ага, т.е. append'ом я вставляю в сам span? Это получается все новые вставки внутри span попали? Теперь понятно почему такие поведение. Спасибо большое за пояснение!