Question

我正在使用JQuery插件datepicker，它允许我设置选项，例如默认日期，格式，最短日期等。

以下是代码

$(".standardDatePicker").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    numberOfMonths: 1,
    minDate: new Date(_currentTime.getFullYear(), _currentTime.getMonth(), _currentTime.getDate(), 1)
});

我正在通过Ajax将内容加载到模态中，但是然后尝试通过调用datepicker插件来绑定已插入DOM的元素。

以下代码在其他代码上运行良好，但我无法找到一种方法将它与插件一起使用，这是否可以在不修改插件的情况下实现？

我尝试了什么

$("document.standardDatePicker").on(datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    numberOfMonths: 1,
    minDate: new Date(_currentTime.getFullYear(), _currentTime.getMonth(), _currentTime.getDate(), 1)
}));

Answer 1

使用jquery的on()方法可以轻松完成此操作，并使用以下“hack”：

$('body').on('focus',".standardDatePicker", function(){
    $(this).datepicker({
        defaultDate: "+1w",
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        numberOfMonths: 1,
        minDate: new Date(_currentTime.getFullYear(), _currentTime.getMonth(), _currentTime.getDate(), 1)
    });
});

绑定文档focus上的body侦听器。当事件触发其中一个后代为.standardDatePicker时，它将处理添加datePicker的函数。

将焦点放在元素上时，它会自动添加datePicker。

Datepicker足够聪明，可以检查元素是否已经创建，因此没有开销或任何其他问题。

另一个选择是在动态创建元素时添加datepicker。

例如：

var newElement = $('<input>');

// insert what you want to add to the element (classes etc.)
newElement.attr('type','text');
// etc
newElement.datePicker({
        defaultDate: "+1w",
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        numberOfMonths: 1,
        minDate: new Date(_currentTime.getFullYear(), _currentTime.getMonth(), _currentTime.getDate(), 1)
});
document.append(newElement);

动态选项示例：

例如，在将元素添加到DOM时添加选项：

$('document').append('<input type="text" class=".standardDatePicker" data-months="2" data-format="dd-mm-YY">');
$('document').append('<input type="text" class=".standardDatePicker" data-months="1" data-format="dd/mm/YY">');

$('body').on('focus',".standardDatePicker", function(){
    $(this).datepicker({
        defaultDate: "+1w",
        dateFormat: $(this).data('format'),
        changeMonth: true,
        numberOfMonths: $(this).data('months'),
        minDate: new Date(_currentTime.getFullYear(), _currentTime.getMonth(), _currentTime.getDate(), 1)
    });
});

Answer 2

我正在通过Ajax将内容加载到模式中，但是我试图通过调用datepicker插件来绑定那些插入到DOM中的元素。

您可以使用.ajaxComplete()方法：

$(document).ajaxComplete(function(){
    $(".standardDatePicker").datepicker({
        defaultDate: "+1w",
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        numberOfMonths: 1,
        minDate: new Date(_currentTime.getFullYear(), _currentTime.getMonth(), _currentTime.getDate(), 1)
    });
});

看到你的评论，你可以创建一个函数，你可以调用它：

var dateInit = function(){
    $(".standardDatePicker").datepicker()    
};

$(document).ajaxComplete(dateInit);

现在你可以在doc上调用这个函数来准备初始化。

Answer 3

基本上，您需要将事件附加到DOM中的更高元素。

待办事项

$(document).on('focus',".standardDatePicker", function(){
    $(this).datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    numberOfMonths: 1,
    minDate: new Date(_currentTime.getFullYear(), _currentTime.getMonth(), _currentTime.getDate(), 1)
 });
});

如何使用on（）函数将加载AJAX的元素绑定到JQuery插件

3 个答案: