jQuery 第一次点击后没有出现日期选择器

Question

我正在尝试调试我的脚本，因为它导致日期选择器在第一次被点击后不显示。

日期选择器创建如下：

$(".dp").datepicker({
    dateFormat: 'dd/mm/yy',
    onSelect: function () {
        // Activate next  textbox and focus on it for further editing
        var el = $(this).closest('tr').next().find('input').prop("disabled", false).removeClass("disabled");
        // Trigger change as when using this event it overrides element onchange and we have to force the event to fire
        $(this).trigger("change");
    }   
});

$(".dp").change(function () {
    if ($(this).val() == "") {
        var el = $(this).closest('tr').next().find('input').prop("disabled", true).addClass("disabled");    
    }
})

日期选择器绑定到 class 个文本框，这些文本框位于 div 中，内容使用 .load() 函数加载。

在我的页面上

<div id="newitem" class="newitem"></div>

有一个按钮可以从 PHP 页面加载 div 内容，该页面包含 X 个日期文本框。

<script type="text/javascript">

$(".info").click(function () {
    $("#newitem").fadeIn().load("ajax/divs/tripinfo.php?id=" + $(this).attr("id")).draggable();
})
</script>

页面加载正常，在第一个 div 加载时，日期选择器按预期工作。在加载的页面上，我用以下内容隐藏了 div：

<button onclick="$('#newitem').fadeOut().remove();" class="closebutton">X</button>

一旦我用 .load() 函数关闭并打开另一个 div，日期选择器就不再工作了。显然，如果我第一次重新加载页面，它会再次工作并且行为会重复。

我怀疑这与我显示和隐藏 div 的方式有关，但我不确定。我无法调试，因为 javascript 控制台中没有错误消息。

Answer 1

首先，将您的 datepicker 设置更改为全局设置，这样您就不需要在每个运行:

上加载它们

$.datepicker.setDefaults({
    dateFormat: 'dd/mm/yy',
    onSelect: function () {
    // Activate next  textbox and focus on it for further editing
    var el = $(this).closest('tr').next().find('input').prop("disabled", false).removeClass("disabled");
    // Trigger change as when using this event it overrides element onchange and we have to force the event to fire
    $(this).trigger("change");
});

然后使用 on 将点击事件绑定到当前和即将到来的元素 dp class:

$(document).on('change', '.dp', (function () {
    if ($(this).val() == "") {
        var el = $(this).closest('tr').next().find('input').prop("disabled", true).addClass("disabled");    
    }
});

然后绑定页面上已有的第一个元素：

$(".dp").datepicker();

然后改变 ajax 调用以包含一个回调，它有一个构造函数来创建新的 textboxes datepickers:

<script type="text/javascript">
    $(".info").click(function () {
        $("#newitem").fadeIn().load("ajax/divs/tripinfo.php?id=" + $(this).attr("id"), function() {
            $(".dp").datepicker();
       }).draggable();
    })
</script>

这假设新元素也有class dp。但我相信你明白了。这应该有效，不幸的是没有时间测试。有不对的地方请评论。

Answer 2

5 年后对我有用的一个非常简单的修复：

 $(document).on('focus', '#datepicker', function(){
            $(this).datepicker({
                dateFormat: 'dd-mm-yy', });
        });

注意：您可以忽略项目特定的 dateFormat 设置。

我遇到的问题： Datepicker 仅在第二次点击后触发。因此，您必须单击该框，单击外部某处，然后再次单击日期选择器字段。

解法： 因为 DOM 已经通过向页面添加新内容的 JS 动态更新（包含我们“新生”日期选择器字段的表单），我们肯定需要 .on() 因为它将扫描 DOM再次 unlike.click() 它将在 DOM 的初始状态上工作（就在我们从后端提供它时，即 Laravel）。

然而，以上并没有解决问题。关键在于 'focus' 动作。出于某种原因，我仍在研究这个问题，只是解决了这个问题，现在日期选择器通过第一次点击和 TAB 切换（这似乎是迄今为止唯一的区别）。

jQuery 第一次点击后没有出现日期选择器

jQuery datepicker not appearing after first click

jquery

jquery-ui

datepicker

jquery-ui-datepicker