DatePicker 在模式中不起作用

2022-01-17 00:00:00 modal-dialog jquery javascript html datepicker

我有一个网站，这里有一个链接，当您点击文本字段时，您可以看到 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.

因此，根据this answer，一种方法是像这样构造您的脚本:

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

相关文章