jQuery datetimepicker 第一次不工作

Question

我有一个动态时间字段，我在其中使用了 jQuery Datetime picker。

对于动态初始化，我使用了这段代码：

 $("body").on("focus",".time-input",function(){
        $(this).datetimepicker();
 });

但是当我第二次对焦时它起作用了。

如果可能的话，一个工作演示会很棒。

Answer 1

在文档就绪的 DOM 元素上初始化 datetimepicker

$(function () {
    $("body").on("focus",".time-input",function(){
       $(this).datetimepicker();
    });
}

这将解决您的问题。

Answer 2

问题是因为您只在元素第一次获得焦点时在元素上实例化日期选择器，之后每次都实例化，这不是一个好主意。相反，您只需要在加载时在元素上实例化它：

$(function() {
    $('.time-input').datetimepicker();
});

如果 .time-input 元素动态附加到 DOM（正如我假设给定的委托事件处理程序），那么您需要在其上调用 datepicker() 方法点它被添加到 DOM。例如：

$.ajax({
    url: 'mypage.php',
    success: function(data) {
        if (data.prop) {
            var $input = $('<input class="time-input" />').appendTo('#myForm');
            $input.datepicker();
        }
    }
});

Answer 3

试试用“$(document.body)”代替“$(body)”。

$(document.body).on('focus', '.time-input', function(){
    $(this).datetimepicker();
});

Answer 4

因为插件使用了focusin事件来显示日期选择器，更好的解决方案是在创建输入元素后立即初始化插件，但是如果你不能这样做，你可以看看一些解决方法，例如

$("body").on("focus", ".time-input", function() {
  if (!$(this).data('xdsoft_datetimepicker')) {
    $(this).datetimepicker({
      onGenerate: function() {
        if (!$(this).hasClass('initial')) {
          $(this).addClass('initial').triggerHandler('open.xdsoft');
        }
      }
    });
  }
});

$('button').click(function() {
  $('#ct').append('<input class="time-input" />');
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.4.5/jquery.datetimepicker.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.4.5/jquery.datetimepicker.js"></script>

<div id="ct">
  <input class="time-input" />
</div>
<button>Add</button>

Answer 5

我认为您需要在 dom 之后设置日期选择器 created.Here 您的代码无法正常工作，因为 jquery datetimepicker 在初始化时未打开选项卡。第二次你关注它的工作是因为它已经初始化了。

像这样：

//here your dom should be updated you can console the length 
//console.log($('.time-input').length)
$('.time-input').each(function(){
  $(this).datetimepicker();
});

jQuery datetimepicker 第一次不工作

jQuery datetimepicker not work on first time

javascript

jquery

jquery-ui

datetimepicker