jQuery live() 使用 jQuery UI 日期选择器失败答案

【问题标题】：jQuery live() failing with jQuery UI datepickerjQuery live() 使用 jQuery UI 日期选择器失败
【发布时间】：2026-01-28 21:15:01
【问题描述】：

好的，我正在尝试使用 jQuery 的 FaceBox() 插件以及 jQuery UI datepicker()。

我已经让它在灯箱第一次出现时绑定到灯箱的输入，但之后它就不起作用了。

我正在执行以下操作：

$(function() { 
    $('.jQueryCalendar').live('click', function () {
            $(this).datepicker({showOn: 'both'}).focus();
    });
});

当灯箱关闭时，我将其内容重新附加到页面（为了不丢失内容 div），这似乎正在杀死 live() 调用。 [注意重新附加发生在原始内容被破坏之后]

编辑

好的，live() 事件正在触发（感谢 Nick Craver），但是不再显示日期选择器。有谁知道为什么？

编辑#2

好的，使用 .html() 重新附加会导致事件需要重新绑定，但要绑定的元素仍然具有类 hasDatepicker，这会与 datepicker() 初始化混淆。

要修复，只需用户

$(this).removeClass('hasDatepicker') .datepicker({showOn: 'both'}).focus();

【问题讨论】：

在里面贴一个警报，我认为你会发现它在搞乱日期选择器，而直播实际上正在触发。
今天 - 2 年后遇到了完全相同的问题 - 这对我有用。感谢您回来并花时间添加对您有用的内容。
您应该发布您的解决方案作为答案并接受它！

标签： jquery jquery-ui focus

【解决方案1】：

这对我有用：

$('.datepicker').live('mousedown', function(){
  $(this).datepicker({
    dateFormat: 'mm/dd/y
  });
});

从 1.9 开始，.live() 已经从 jQuery 中删除，应该被 .on() 替换。使用你会得到的新语法：

$(document).on('mousedown', '.datepicker', function(){
  $(this).datepicker({
    dateFormat: 'mm/dd/y
  });
});

【讨论】：

【解决方案2】：

这对我有用

$.datepicker.setDefaults({ dateFormat: 'yy-mm-dd', ... });
$('input.date').live('focus', function() {
 $(this).datepicker().datepicker('show');
 true;
});

【讨论】：

【解决方案3】：

你可以尝试使用.livequery插件

$('.jQueryCalendar').livequery(function() {

    // This will fire for each matched element.
    // It will also fire for any new elements added to the DOM.
    $(this).datepicker(options);
});

我找到了答案here

【讨论】：

这对我不起作用。我使用 fringd 的帖子来克服这个挑战。

【解决方案4】：

我遇到了同样的问题，但问题是，我有很多带有开始和结束日期的“图块”。我没有得到我需要的结果，因为每个开始日期的 id 以及结束日期都是相同的。同样对于多个日期字段，我将 datePickers 返回的值全部设置为日期字段的第一个实例。

这段代码对我有用：

[在 HTML 中]

<label for="display_date">Display/Start Date</label><br />

<input type="text" class="dateStart" name="display_date" value="" /><br />

<label for="display_date_end">End Date</label><br />

<input type="text" class="dateEnd" name="display_date_end" value="" /><br />

[包含在 JAVASCRIPT 中]

// set the datePicker on the start and end fields

$('input.dateStart').datepicker({dateFormat:"yy-mm-dd", changeYear: true});

$('input.dateEnd').datepicker({

dateFormat:"yy-mm-dd",

changeYear: true,

beforeShow: function(){

var value = $(this).siblings('.dateStart').val();

$(this).datepicker('option', 'minDate', value);

}

});

我希望这可以帮助其他有同样问题的人！

胡丁格

【讨论】：

【解决方案5】：

$( "#datepicker" ).live('mousedown',function()
{
$(this).datepicker({ 
dateFormat: 'dd/mm/yy',
minDate: 0
});     
});

试试这个..

【讨论】：

【解决方案6】：

$(this).removeClass('hasDatepicker') .datepicker({showOn: 'both'}).focus();

解决了我的问题

谢谢！

【讨论】：

【解决方案7】：

试试这个，看看会发生什么：

$(function() { 
    $('.jQueryCalendar').live('click', function () {
            $(this).datepicker('destroy').datepicker({showOn: 'both'}).focus();
    });
});

如果您将 jQuery UI 1.7.2 与 jquery 1.4 一起使用，某些效果会破坏小部件，它会褪色等可能会导致日期选择器问题。 jQuery UI 1.8 修复了这个问题，它目前处于 RC3 状态。

【讨论】：

@Ed - 在这种情况下，灯箱是否会褪色或调整大小，是否有任何动画关闭？
是的，它会淡出，但是，这不会破坏任何其他日期选择器（不在灯箱中），而且我使用的是 jQuery 1.3.2
@Ed - 您可以将代码发布到您重新附加到页面的位置吗？灯箱应该自己做这个，也许那里丢失了一些东西。
@Nick 有很多，所以看看我对*.com/questions/2027290/…的回答
@Nick 正确，因此使用 live()。我现在实际上已经修复了它：元素仍然有 hasDatepicker 作为一个与初始化过程混淆的类。

【解决方案8】：

日期选择器可能在盒子后面...

前段时间我也遇到过同样的问题。

把它放在一个 css 文件中，这对我有用。

#ui-datepicker-div
{
    z-index:9999999;
}

【讨论】：

不，就像我说的，第一次工作：我已经处理了 z-index
这对我有用 #ui-datepicker-div { z-index: 9999999 !important; }