jQuery - 动态添加元素上“.on”和“.each”的组合[重复]

Posted 2023-05-07

【中文标题】jQuery - 动态添加元素上“.on”和“.each”的组合[重复]

【英文标题】：jQuery - combination of ".on" and ".each" on dynamically added elements [duplicate]

【发布时间】：2015-05-26 05:21:25

【问题描述】：

我正在动态添加新元素，这些元素如下所示：

<div id="cars">
  <input type="text" name="car_added[]" class="car" />
  <input type="text" name="car_added[]" class="car" />
  <input type="text" name="car_added[]" class="car" />
  <input type="text" name="car_added[]" class="car" />
  <input type="text" name="car_added[]" class="car" />
</div>

如果这些元素是静态的，我可以使用以下代码轻松地在它们上添加处理程序：

$(".car").each(function()$(this).datetimepicker();)

点击输入后，将显示日期时间小部件。

但是如何为动态添加的元素执行此操作？我尝试了以下方法，但它不起作用：

$('#cars').on('click', '.car', function() 
    $(this).datetimepicker();
);

如何在这个 sn-p 中实现.each 部分？

提前谢谢你。

【问题讨论】：

jsfiddle.net/SJ7bJ/98

是的 - 我点击“添加新车”，然后会显示一个输入。点击输入后，我想显示datepicker 小部件。

第二个样本不需要每个部分都有

【参考方案1】：

试试这个：您不需要迭代然后将 datepicker 应用于元素。拨打datetimepicker()如下图即可

$('#cars .car').datetimepicker();

编辑 - 在动态生成的元素上添加 datetimpicker，在添加动态生成的元素时附加它。

例如 - 我在按钮单击时添加元素。我需要同时添加 datetimepicker。请参阅下面的代码和 jsfiddle 演示

$(function()
    //add datetimepicker for existing elements
    $('#cars .car').datepicker();
    
    //add datetimepicker for dynamically added elements when adding it
    $('#clickMe').click(function()
      var newElement = $('<input type="text" name="car_added[]" class="car" />');
      //add datepicker here
      newElement.datepicker();  
      $('#cars').append(newElement);
    );
);

JSFiddle Demo

注意- OP 使用了datetimepicker，但请注意我使用的是 datepicker 而不是 datetimepicker。

【讨论】：

但是这种方法不适用于新添加的元素。

@user984621..试试我的回答

@user984621 请检查我的编辑。请注意我使用的是 datepicker 而不是 datetimepicker