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

目前，您是在第一次点击时初始化它，这就是为什么似乎没有发生的事情。

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

修改

要在动态添加的元素上初始化并打开日期选择器，您可以这样做：

$('#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.问题：事先没有将小部件限制为元素。

后果：当您第一次单击时，窗口小部件代码将映射到元素。

3解决方案：在进行点击事件之前，需要初始化/映射/绑定元素。比如页面加载。

例如

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

如果我有这个函数将datepicker与id为'datepickX'的元素绑定，

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

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

Answer 3

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

jQuery - 在动态创建的元素上单击（使用“.on（）”）不起作用，只需双击即可。为什么？

3 个答案: