jquery 在动态元素上调用日期选择器

Question

我试图在动态创建的元素上调用日期选择器，但不起作用。我知道我的格式不正确。有人知道怎么做吗？

    $("body").on('click', '.startNew', function() {
        $(".startNew").datepicker({
           dateFormat : "yy-mm-dd 00:00:00",
           numberOfMonths: 2,
           onSelect: function(selected) {
             $(".endNew").datepicker("option","minDate", selected)
           }
        });
    });
    $("body").on('click', '.endNew', function() {
       $(".endNew").datepicker({ 
           dateFormat : "yy-mm-dd 00:00:00",
           numberOfMonths: 2,
           onSelect: function(selected) {
              $(".startNew").datepicker("option","maxDate", selected)
           }
       });
    });

Answer 1

已更新。尝试更改 (body -> document; click -> focus)

来自

$(body).on('click',".startNew", function(){
    $(".startNew").datepicker({

$(body).on('click',".endNew", function(){
    $(".endNew").datepicker({

到

$(document).on('focus',".startNew", function(){
    $(this).datepicker({

$(document).on('focus',".endNew", function(){
    $(this).datepicker({

工作FIDDLE

HTML

Start: <input class='endNew'><br/><br/>
End: <input class='startNew'>

JS

$(document).on('focus',".startNew", function(){
  $(this).datepicker({
    dateFormat : "yy-mm-dd 00:00:00",
    numberOfMonths: 2,
    onSelect: function(selected) {
      $(".endNew").datepicker("option","minDate", selected)
    }
  });
});


$(document).on('focus',".endNew", function(){
  $(this).datepicker({ 
    dateFormat : "yy-mm-dd 00:00:00",
    numberOfMonths: 2,
    onSelect: function(selected) {
      $(".startNew").datepicker("option","maxDate", selected)
    }
   });
});

Answer 2

问题是第一次点击正在初始化插件，但不会显示日期选择器，因为日期选择器点击处理程序是在点击事件之后添加的。所以

$("body").on('click', '.startNew', function () {
    if (!$(this).hasClass('hasDatepicker')) {
        $(this).datepicker({
            dateFormat: "yy-mm-dd 00:00:00",
            numberOfMonths: 2,
            onSelect: function (selected) {
                $(".endNew").datepicker("option", "minDate", selected)
            }
        }).datepicker('show');
    }
});
$("body").on('click', '.endNew', function () {
    if (!$(this).hasClass('hasDatepicker')) {
        $(this).datepicker({
            dateFormat: "yy-mm-dd 00:00:00",
            numberOfMonths: 2,
            onSelect: function (selected) {
                $(".startNew").datepicker("option", "maxDate", selected)
            }
        }).datepicker('show');
    }
});

在这种情况下，您尝试延迟初始化插件，但更好的解决方案是在创建目标元素 .startNew 和 .endNew 之后初始化插件。

jquery 在动态元素上调用日期选择器

jquery calling datepicker on dynamic elements

javascript

jquery

dynamic

datepicker

jquery-ui-datepicker