Почему событие click в jQuery не срабатывает второй раз? [требует правки]

320
30 января 2018, 11:45

Есть событие которое, по клику на кнопку, добавляет HTML код на страницу.

$(document).ready(function() { 
  $('.add').on('click', function() { 
    event.preventDefault(); 
    var i = $('.input_selection').length + 1; 
    if (i < 6) { 
      $('<div class="input_selection"><input type="text" name="amount' + i + '" id="amount' + i + '" placeholder="Количество"><div class="wrapper_select"><select name="type_cargo' + i + '" id="type_cargo' + i + '"><option>Вид груза</option><option value="Документы | 0.1 кг">Документы | 0.1 кг</option><option value="Груз | > 1 кг">Груз | > 1 кг</option><option value="Груз | < 1 кг">Груз | < 1 кг</option></select></div><input type="text" name="length' + i + '" id="length' + i + '" placeholder="Длина, см"><input type="text" name="width' + i + '" id="width' + i + '" placeholder="Ширина, см"><input type="text" name="height' + i + '" id="height' + i + '" placeholder="Высота, см"><input type="text" name="weight' + i + '" id="weight' + i + '" placeholder="Вес, кг">').appendTo('.two_section'); 
    } 
    return false; 
  }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="two_section"> 
  <label for="amount">Посылки:</label> 
  <div class="input_selection"> 
    <input type="text" name="amount1" id="amount1" placeholder="Количество"> 
    <div class="wrapper_select"> 
      <select name="type_cargo1" id="type_cargo1"> 
                <option>Вид груза</option> 
                <option value="Документы | 0.1 кг">Документы | 0.1 кг</option> 
                <option value="Груз | > 1 кг">Груз | > 1 кг</option> 
                <option value="Груз | < 1 кг">Груз | < 1 кг</option> 
              </select> 
    </div> 
    <input type="text" name="length1" id="length1" placeholder="Длина, см"> 
    <input type="text" name="width1" id="width1" placeholder="Ширина, см"> 
    <input type="text" name="height1" id="height1" placeholder="Высота, см"> 
    <input type="text" name="weight1" id="weight1" placeholder="Вес, кг"> 
  </div> 
</div> 
<div class="three_section"> 
  <div class="add_pos"> 
    <button class="add" type="button">Добавить посылку</button> 
  </div> 
</div>

Событие срабатывает при нажатии на кнопку в первый, третий, четвертый раз. Но не срабатывает при нажатии во второй раз. Подскажите почему так происходит?

READ ALSO
Как, чтобы кнопка назад возвращала на предыдущий экран при infinite scroll?

Как, чтобы кнопка назад возвращала на предыдущий экран при infinite scroll?

Реализовал бесконечную прокрутку постов по этому руководствуВот основной код скрипта бесконечной загрузки постов при прокрутке страницы

264
Интеграция vue на сайт написанный на backbone

Интеграция vue на сайт написанный на backbone

Доброго времениЕсть сайт написанный на backbone и появилась задача расширить его функционал

276
Chart JS, пропадает tooltip после обновления графика

Chart JS, пропадает tooltip после обновления графика

В либе для графиков Chart JSПосле пуша в массив data и обновления графика, chart

250
Функция высшего порядка

Функция высшего порядка

Нужно создать две функции:

214