jquery - 如何使用 on() 函数将 AJAX 加载的元素绑定(bind)到 JQuery 插件

Question

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

这是代码

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

我正在通过 Ajax 将内容加载到模态中，但随后尝试通过调用 datepicker 插件来绑定(bind)那些已插入 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 监听器绑定(bind)到文档的 body 上。当事件在 .standardDatePicker 的后代之一上触发时，它将处理添加 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)
    });
});​