jQuery - 在动态创建的元素上单击(使用".on()")不起作用，只能双击。为什么？

Question

我有一个按钮，点击后会生成一个新的输入(或多个输入(。当我点击新生成的输入时，我想弹出一个日历小部件。

我是这样做的：

$('#datetime_inputs').on('click', '.new_datetime_input', function() {
  $(this).datetimepicker({
    format: 'Y/m/d H:i'
  });
});

当我点击这个新输入时，什么也没发生。当我第二次点击时，小部件已经加载(很好(。如果我点击那里第三次，小部件加载(好(，第四次-小部件加载了(好(等等

为什么当我第一次点击那里的小部件没有加载？

谢谢。

编辑：我使用的插件链接。

Answer 1

1.问题：小部件事先没有绑定到元素。

2. 结果：当您第一次单击时，小部件代码被映射到元素

3解决方案：在生成click事件之前，需要初始化/映射/绑定元素。例如页面加载。

例如。

 function bindDatePicker(i){
                $("#datepick"+i).datepicker({
              changeMonth: true,
                  changeYear: true,
                  dateFormat : 'dd/mm/yy',
                  numberOfMonths:1,
                 maxDate: "+0M +0D",yearRange:"1960:2099"
                  });       
        };

如果我有这个函数将日期选择器与id为"datepickX"的元素绑定，

<input type="text" maxlength="12" onclick="bindDatePicker($index);" id="datepick4" >

我会在页面加载时调用这个函数，它会将小部件与元素绑定。所以下次你会用一些魔术点击elemtn！！！它将只在第一时间开放。

Answer 2

发生这种情况是因为在"单击"时您正在初始化日期时间选择器。因此，下次您单击它时，它将已经初始化，并将向您显示日历。只要按照贾的建议，在创建过程中初始化它。它会有点击事件，所以你不需要手动设置它。

Answer 3

将代码更改为：

$('.new_datetime_input').datetimepicker({
    format: 'Y/m/d H:i'
});

目前，您在第一次点击时就对其进行了初始化，这就是为什么似乎什么都没有发生的原因。

您不需要设置和处理点击事件来显示它，它将由插件在调用上述方法后完成。

---

编辑

要初始化并打开动态添加元素的日期选择器，可以执行以下操作：

$('#datetime_inputs').on('click', '.new_datetime_input', function() {
  // Do not initialize twice on same element
  if($(this).hasClass('init')) return;
  else $(this).addClass('init');
  // Initialize
  $(this).datetimepicker({
    format: 'Y/m/d H:i'
  })
  $(this).click(); // Open datetimepicker
});