Question

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

对于动态初始化，我使用了以下代码：

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

但是当我第二次聚焦时它会起作用。

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

Answer 1

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

$(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 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

尝试＆＃34; $（document.body）＆＃34;相反＆＃34; $（正文）＆＃34;。

Parse.User.requestPasswordReset("email@example.com", {
  success: function() {
  // Password reset request was sent successfully
  },
  error: function(error) {
    // Show the error message somewhere
    alert("Error: " + error.code + " " + error.message);
  }
});

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

jQuery datetimepicker第一次不能工作

5 个答案: