javascript - DatePicker 不在模态内工作

Question

我有一个网站和here is a link ，当您单击文本字段时，您可以看到 DatePicker 正在工作但是如果你点击 ImportFriend -> Add Manual Friend -> 然后如果你点击生日字段，日期选择器永远不会出现。我可以通过 Firebug 看到该字段得到了 hasDatePicker 属性。我不确定是什么让它不显示日期选择器，任何可以帮助我的人请谢谢

Answer 1

正如@Bluetoft 所说，答案是事件委托(delegate)。

它对您不起作用的原因是因为您的日期选择器被绑定(bind)到 脚本运行时存在的元素(更不用说，生日字段的 ID 与 #datepicker 不同，这是您的脚本绑定(bind)到的内容)。

当您动态引入新表单时，日期选择器未绑定(bind)到新元素。

所以，一种方法，根据 this answer , 就是像这样构建你的脚本:

$(function() {
    $("body").delegate("#datepicker", "focusin", function(){
        $(this).datepicker();
    });
});

此外，您的表单“生日”输入的 ID 为#fi_bday，这是它未被绑定(bind)的另一个原因。我建议您在需要日期选择器的任何输入位置分配一个“日期选择器”类，然后更改脚本以将日期选择器功能绑定(bind)到 '.datepicker' 元素:

$(function() {
    $("body").delegate(".datepicker", "focusin", function(){
        $(this).datepicker();
    });
});

最后，如果您不想使用上面更好的通用类方法，您可以在下面的选择器中使用两个选择器。下面的方法以一种将日期选择器绑定(bind)到模态窗口元素的方式进行委托(delegate):

$(function() {
    $("body").delegate("#datepicker, #fi_bday", "focusin", function(){
        $(this).datepicker();
    });
});