jQuery datetimepicker第一次無法使用

Question

我有一個動態時間字段，在其中使用了jQuery Datetime picker 。

對於動態初始化，我使用了以下代碼：

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

但是，當我第二次專注時，它會起作用。

如果可能的話，可以進行演示的工作很好。

Answer 1

問題是因為您僅在元素第一次獲得焦點時才實例化日期選擇器，然后在之后每次都實例化，這不是一個好主意。 相反，您只需要在加載的元素上實例化它：

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

如果.time-input元素是動態附加到DOM上的（我假設已委派委托事件處理程序），則需要在將它添加到DOM的那一點上調用datepicker()方法。 例如：

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

Answer 2

這是因為插件使用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 3

准備好文檔上的DOM元素上的datatimepicker

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

這樣可以解決您的問題。

Answer 4

嘗試使用“ $（document.body）”代替“ $（body）”。

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

Answer 5

我認為您需要在創建dom之后設置datepicker。此處您的代碼無法正常工作，因為jquery datetimepicker初始化時未打開選項卡。 第二次，因為它已經初始化，所以重點關注它的工作。

像這樣：

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