Jquery Class 选择器不适用于动态 Class 选择器

Question

我有一个 bootstrap 表单组，定义如下 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 class 存在于页面加载中，所以为什么我不能将它绑定到那个 class 然后 select 所有 .btn-remove-qty classes 里面它是动态添加的吗？

Answer 1

基于jQuery .on() 方法文档。

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on()

在您的情况下，事件未附加到动态添加的 .form-group，因为在调用 .on() 时它不存在

您应该将 .form-group 选择器替换为静态元素。

我创建了一个 jsfiddle。在那里我添加了一个 #wrapper div 并用作选择器。

Jquery Class 选择器不适用于动态 Class 选择器

Jquery Class Selector Not Working With Dynamic Class Selector

jquery

dom

listener

twitter-bootstrap