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

Posted 2023-05-08

【中文标题】Jquery 类选择器不适用于动态类选择器

【英文标题】：Jquery Class Selector Not Working With Dynamic Class Selector

【发布时间】：2016-05-05 05:45:04

【问题描述】：

我有一个使用以下 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 类？

【问题讨论】：

试试$('.form-group button.btn-remove-qty').on('click, function()

不，那没用

你得到的错误是什么！

没有错误。该函数永远不会触发。

检查这个小提琴 - 两者都在这里工作jsfiddle.net/du4oL4b1我觉得还有其他问题

【参考方案1】：

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

事件处理程序仅绑定到当前选定的元素；它们必须在您的代码调用 .on() 时存在

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

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

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

【讨论】：

所以你说 jquery 基本上循环遍历所有元素，在运行时使用类 .form-group 为每个元素分配一个侦听器，并且由于我动态添加的 .form-group 不存在它没有得到听众？如果是这样，这是有道理的。我的印象是，侦听器被分配给具有 .form-group 类的所有元素，无论它们何时加载，只要在运行时实际上存在一个。