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

Question

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

<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 部分？

提前谢谢你。

Answer 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。