当我添加动态字段jQuery datepicket不起作用时

Question

我正在使用jQuery datepicker，当我添加动态字段时，datepicker无法在动态添加的字段上工作...

谢谢。

我的HTML日期类型字段：

<td><input type="text" name="myDob[]" class="form-control form-control-sm datepicker" placeholder="Date of Birth: "></td>

我的DatePicker jQuery：

// We don't want the val method to include placehoder value, so removing it here.
var $valFn = $.fn.val;
$.fn.extend({
  val: function() {
    var valCatch = $valFn.apply(this, arguments);
    var placeholder = $(this).attr("placeholder");

    // To check this val is called to set value and the val is for datePicker element 
    if (!arguments.length && this.hasClass('hasDatepicker')) {
      if (valCatch.indexOf(placeholder) != -1) {
        return valCatch.replace(placeholder, "");
      }
    }
    return valCatch;
  }
});

// Insert placeholder as prefix in the value, when user makes a change.
$(".datepicker").datepicker({
  onSelect: function(arg) {
    $(this).val($(this).attr("placeholder") + arg);
  }
});

这是我的动态添加字段jQuery：

$(document).ready(function() {
  //group add limit
  var maxGroup = 10;

  //add more fields group
  $(".addMore").click(function() {
    if ($('body').find('.fieldGroup').length < maxGroup) {
      var fieldHTML = '<table class="table table-bordered fieldGroup">' + $(".fieldGroupCopy").html() + '</table>';
      $('body').find('.fieldGroup:last').after(fieldHTML);
    } else {
      alert('Maximum ' + maxGroup + ' groups are allowed.');
    }
  });

  //remove fields group
  $("body").on("click", ".remove", function() {
    $(this).parents(".fieldGroup").remove();
  });
});

更新的图片：

Answer 1

初始化插件时：

$(".datepicker").datepicker({
    //...
});

这只会在当时匹配 的元素上对其进行初始化。将来添加的匹配元素将在添加后需要初始化。请注意，您可能希望更具体地标识添加的元素，而不是对所有.datepicker元素执行插件的全局重新初始化。

问题就变成了，如何具体识别新添加的元素？例如，它们是否专门在您已有参考的新的包含元素中？如果是这样，您可以使用它来缩小选择范围：

$(".datepicker", someContainingElement).datepicker({
    //...
});

或者为新添加的元素赋予特定的类，然后仅出于识别它们的目的而将其删除？：

$(".newdatepicker").datepicker({
    //...
}).removeClass("newdatepicker");

关于如何标识元素，有多种选择，但是要点是，您需要在添加到DOM的任何新元素上初始化插件。

Answer 2

这是一个关于stackoverflow的流行问题...简而言之，如果您的输入在页面加载后进入DOM，则必须使用事件委托模式来初始化所有日期选择器。一种流行的技巧是在document拥有focus时收听。

$( document ).on( "focus", ".datepicker:not(.hasDatepicker)", function() {
   var self = this;
   $(self).datepicker({

     // Your code ....

   });
});

working demo