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

datepicker绑定到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上，datepicker按预期工作。在加载的页面上，我使用以下内容隐藏div：

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

一旦我用.load()函数关闭并打开另一个div，则datepicker不再起作用。显然，如果我第一次重新加载页面，它将再次运行并重复行为。

我怀疑这与我展示和隐藏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将click事件绑定到dp类的当前和即将到来的元素：

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

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

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

这假设新元素也有类dp。但我相信你明白了。这应该工作，遗憾的是没有时间进行测试。评论是否有错误。

Answer 2

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

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

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

我面临的问题： Datepicker 仅在第二次点击后触发。所以你必须点击这个框，点击外面的某个地方，然后再次点击日期选择器字段。

解决方案： 因为 DOM 已经通过 JS 动态更新，向页面添加新内容（包含我们的“新生”日期选择器字段的表单），我们肯定需要 .on() 因为它会再次扫描 DOM，不像 .click() 会处理 DOM 的初始状态（就像我们从后端即 Laravel 提供它一样）。

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

第一次点击后jQuery datepicker没有出现

2 个答案: