jQuery-在动态创建的元素上单击（使用“ .on（）”）无效，只能双击。 为什么？

Question

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

我这样做是这样的：

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

当我单击此新输入时，没有任何反应。 当我第二次单击时，将加载小部件（良好）。 如果我第三次单击那里，则加载小部件（良好），第四次-加载小部件（良好），依此类推。

为什么当我第一次单击该窗口小部件时未加载它？

谢谢。

编辑：我使用link的插件。

Answer 1

将您的代码更改为：

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

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

您无需设置和处理click事件即可显示它，该事件将在调用上述方法后由插件完成。

---

编辑

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

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

Answer 2

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

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

3解决方案：创建点击事件之前，需要初始化/映射/绑定元素。 对于说在页面加载。

例如。

 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" >

我将在页面加载时调用此函数，它将把小部件与element绑定。 因此，下次您将单击带有一些魔术的elemtn！ 它将仅在第一次打开。

Answer 3

发生这种情况是因为在“单击”时，您正在初始化datetimepicker。 因此，下次您单击它时，它将已经初始化并向您显示日历。 只需遵循Jai的建议并在创建过程中对其进行初始化。 它将具有单击事件，因此您无需手动设置。