Javascript jQuery—在动态创建的元素上单击（使用“.on（）”）'；不工作，只需双击。为什么？

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

我是这样做的：

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

当我点击这个新输入时，什么也没发生。当我第二次点击时，小部件被加载（好）。如果我第三次点击，小部件被加载（良好），第四次——小部件被加载（良好），依此类推

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

多谢各位

编辑：我使用的插件。

将代码更改为：

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

目前，您在第一次单击时正在初始化它，这就是为什么似乎什么都没有发生

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

---

编辑

要在动态添加的元素上初始化并打开datepicker，可以执行以下操作：

$('#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
});

---

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

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

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

例如

如果我使用此函数将datepicker与id为“datepickX”的元素绑定

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

我将在页面加载时调用此函数，它将小部件与元素绑定。所以下次你会用一些魔法点击elemtn！！！它将仅在第一次打开。

发生这种情况是因为在“单击”时您正在初始化日期时间选择器。 因此，下次您单击它时，它将已初始化，并将向您显示日历。

---

只需遵循Jai的建议，并在创建过程中初始化它。它将有一个点击事件，因此您无需手动设置。

您可以初始化生成新元素的日历。添加插件的链接。感谢您的回答。我试着按照你的建议去做，但它只对已经加载到页面中的元素有效，而对动态创建的元素无效。我使用了这段代码（谢谢），并试图修改它-但它仍然不能解决问题-在第二次点击输入后，小部件就是小部件（无论是加载还是生成输入）

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