Javascript 日期选择器在模式内不工作

我有一个网站，当你点击textfield时，你可以看到DatePicker正在工作 但是如果你点击I

mportFriend->addmanualfriend->

，那么如果你点击生日字段，日期选择器就不会出现。我可以通过firebug看到该字段具有

hasDatePicker

属性。

---

我不知道是什么让它不显示日期选择器，任何能帮助我的人都请感谢

，正如@Bluetoft所说，答案是事件委派

它不适用于您的原因是，您的datepicker被绑定到脚本运行时存在的元素（更不用说，生日字段的id与#datepicker不同，后者是您的脚本绑定到的）

动态引入新表单时，datepicker不会绑定到新元素

因此，根据，一种方法是这样构造脚本：

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

此外，表单“生日”输入的id为#fi#u bday，这是它不被绑定的另一个原因。我建议您在希望datepicker具有“datepicker”类的位置分配任何输入，然后更改脚本以将datepicker功能绑定到

。datepicker'

元素：

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

最后，如果不想使用上面更好的泛型类方法，可以在下面的选择器中使用两个选择器。下面的方法以某种方式委托，以便将日期选择器绑定到模态窗口元素：

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

关于C#net in.aspx

---

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

由于日期选择器没有z-index属性，因此它没有显示在具有z-index的模式/弹出窗口上。 我发现日期选择器工作正常，但它显示在模式后面，所以我将z-index属性添加到日期选择器类中

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

---

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

将z-index添加到datepicker类中，并使用它添加重要内容。给出一个比modal更大的值。通常情况下，其z指数为1050

.yourDatePicker{ z-index:9999!important; }

---

添加属性容器：

$('.datepickerClass').datepicker({
           ...,
            container: "#modalId",
           ...,
        });

---

我也有同样的问题，我发现我两次呈现datetimepicker库（一次在主页上，一次在部分视图中）。只在主页中呈现一次就解决了这个问题。

我尝试了事件委派片段/z-index，但jquery datepicker的选择年份下拉功能不起作用-我可以选择日期/月份，但不能选择年份

虽然bootstrap的日期选择器确实有效——gijgo one或tempusdominus（我没有尝试过）——但我只想坚持使用jquery

---

因此，我放弃了模式功能，并使用引导中的collapse来显示/隐藏/div以及使用javascript查看事件委派的自定义div_onshown/隐藏/取消/确定…为什么要将其包装为$（function（）“？@Smithy-从技术上讲，他不需要这个，因为他的脚本在正文的末尾。但是把你的脚本放在这样一个准备文档的函数中是一个很好的做法。@Bluetoft谢谢你，但答案有点模糊。”

.yourDatePicker{ z-index:9999!important; }

$('.datepickerClass').datepicker({
           ...,
            container: "#modalId",
           ...,
        });