DatePicker在模态中不起作用

Question

我有一个网站,这里有一个链接,当你点击文本字段时,你可以看到DatePicker工作但是你点击我mportFriend -> Add Manual Friend ->然后如果你点击生日字段,datepicker永远不会出现.我可以通过firebug看到该字段获得了hasDatePicker属性.我不知道是什么让它不显示datepicker,任何人都可以帮助我,谢谢

Answer 1

正如@Bluetoft所说,答案是事件授权.

它不适合你的原因是因为你的datepicker被绑定到脚本运行时存在的元素(更不用说,生日字段的id不同于#datepicker,这是你的脚本绑定到的) .

当您动态引入新表单时,datepicker不会绑定到新元素.

因此,根据这个答案,一种方法是构建你的脚本,如下所示:

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

此外,您的表单"生日"输入的ID为#fi_bday,这是它未受约束的另一个原因.我建议您将任何输入分配到您希望datepicker使用"datepicker"类的位置,然后更改脚本以将datepicker功能绑定到'.datepicker'元素:

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

最后,如果您不想使用上面更好的通用类方法,可以在下面的选择器中使用两个选择器.下面的方法以将datepicker绑定到模态窗口元素的方式委托:

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

Answer 2

上面提到的解决方案对我不起作用.

如日期选择器具有不与z-index属性,所以它不是模态/弹出示出,其具有的z索引. 我发现日期选择器工作正常,但它显示在模态后面.所以我将z-index属性添加到date-picker类.

.datepicker{ z-index:99999 !important; }

这就是我向其他用户分享我的解决方案的原因.我相信这会对某人有所帮助.