Jquery Класс Selector не работает с Dynamic Class Selector

Question

У меня есть самозагрузки вид группы, как это определено с помощью следующего HTML:

<div class="form-group">     
    <label class="control-label" for="input-1">Qty</label>    
     <select name="quantity[]" id="input-1" data-qtyindex="0" class="form-control input-qty"> 
     <option value="25">25</option> 
     <option value="50">50</option> 
     </select> 
    </div> 
</div> 

Тогда динамически Я добавляю другую форму группу ниже этого. Эта новая форма группа имеет группу кнопок и выглядит следующим образом:

<div class="form-group">     
    <label class="control-label" for="input-2">Qty</label>    
    <div class="input-group"> 
     <select name="quantity[]" id="input-2" data-qtyindex="1" class="form-control input-qty"> 
     <option value="25">25</option> 
     <option value="50">50</option> 
     </select> 
     <div class="input-group-btn"> 
     <button type="button" class="btn btn-danger btn-remove-qty">Delete</button> 
     </div> 
    </div> 
</div> 

Сейчас я пытаюсь настроить слушателя на кнопку в виде динамически загружаемой группы. Поэтому у меня есть jQuery, который выглядит примерно так:

$('.form-group').on('click','.btn-remove-qty',function(){ 
    alert("delete"); 
    $(this).closest('.form-group').remove(); 
}); 

Однако этот слушатель никогда не срабатывает. Теперь, прежде чем кто-нибудь скажет, что я должен прикрепить его к телу или документу. Да, это действительно работает, но я хочу знать, почему эта настройка не работает. Класс .form-group существует при загрузке страницы, поэтому почему я не могу привязать его к этому классу, а затем выбрать все классы .btn-remove-qty внутри него, которые добавляются динамически?

Answer 1

Основано на документации по методу jQuery .on().

Обработчики событий привязаны только к выбранным в данный момент элементам; они должны существовать в то время, что ваш код делает вызов .on()

В вашем случае, это событие не был привязан к динамически добавляемые .form-group, потому что он не существует, когда .on() называется

Вы должны заменить свой селектор .form-group на статический элемент.

Я создал jsfiddle. Там я добавил #wrapper div и использовал его как селектор.