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

问题描述

我有一个网站，这里有一个链接，当您点击文本字段时，您可以看到 DatePicker 正在工作但是如果你点击 ImportFriend ->添加手动好友 -> 然后如果你点击生日字段，日期选择器永远不会出现.我可以通过萤火虫看到该字段获得了 hasDatePicker 属性.我不确定是什么导致不显示日期选择器，请任何可以帮助我的人谢谢

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

推荐答案

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

As @Bluetoft says, the answer is event delegation.

它不适合您的原因是因为您的日期选择器被绑定到脚本运行时存在的元素(更不用说，生日字段的 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).

当您动态引入新表单时，日期选择器不会绑定到新元素.

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' 元素:

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();
    });
});

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

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屋！