DatePicker在模态中不工作 [英] DatePicker not working inside a modal

问题描述

我有一个网站，这里是一个链接，当您点击文本框时，您可以看到DatePicker工作
但是iF你点击我 mportFriend - >添加手动朋友 - > 然后如果您点击生日字段，datepicker永远不会出现。我可以通过firebug看到该字段获取了 hasDatePicker 属性。
我不知道什么使它不显示datepicker，任何人谁可以帮助我请谢谢

I have a site and here is a link, When you click on textfield you can see the DatePicker working But iF you click on ImportFriend -> Add Manual Friend -> then if you click on birthday field the datepicker never appears.I can see through firebug that the field got the hasDatePicker attribute. I am not sure what making it not to show the datepicker,anyone who can help me please thanks

推荐答案

As @Bluetoft说，答案是事件委托。

As @Bluetoft says, the answer is event delegation.

它不适合你的原因是因为你的datepicker被绑定到当时存在的元素脚本运行（更不要说生日字段的ID与#datepicker不同，这是您的脚本绑定的）。

The reason it's not working for you is because your datepicker is being bound to elements that exist at the time the script is run (not to mention, the birthday field has a different id than #datepicker, which is what your script is binding to).

当你动态地引入新的形式，datepicker并不绑定到新元素。

When you dynamically bring in the new form, the datepicker is not bound to the new elements.

所以，根据这个答案是构建你的脚本，如下所示：

So, one method, according to this answer, is to construct your script like so:

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

另外，您的表单生日输入的ID为#fi_bday这是另一个没有约束力的原因。我建议您使用datepicker类别将datepicker分配给任何输入，然后更改脚本以将datepicker功能绑定到'。datepicker'元素：

Additionally, your form "birthday" input has an id of #fi_bday, which is another reason it's not being bound. I'd recommend that you assign any inputs where you want the datepicker with a class of "datepicker", then change your script to bind the datepicker functionality to '.datepicker' elements:

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

最后，如果不想利用更好的通用上面的类方法，可以在下面的选择器中使用两个选择器。下面的方法代表将datepicker绑定到模态窗口元素的方式：

Finally, if you don't want to utilize the better, generic class method above, you can use two selectors in the selector below. The method below delegates in a manner as to bind the datepicker to the modal window element(s) as well:

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

这篇关于DatePicker在模态中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！