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并用作选择器。

Jquery类选择器不使用动态类选择器

1 个答案: