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

274
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?

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

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

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

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

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

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

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

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

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

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

173