jQuery datepicker 在 AJAX 之后不持久

Question

所以我正在使用 jQuery 日期选择器，它运行良好。我正在使用 AJAX 去获取一些内容，显然当应用这个新内容时，绑定丢失了，我 learnt about this last week 并发现了 .live() 方法。

但是如何将它应用到我的日期选择器？因为这不是一个事件，所以.live() 将无法提供帮助……对吧？

这是我用来将日期选择器绑定到我的输入的代码：

$(".datefield").datepicker({showAnim:'fadeIn',dateFormat:'dd/mm/yy',changeMonth:true,changeYear:true});

我不想在每次触发 AJAX 时都调用此方法，因为我希望尽可能保持通用性。

干杯:-)

编辑

按照@nick 的要求，下面是我的包装函数得到了ajax() 方法：

var ajax_count = 0;
function getElementContents(options) {
    if(options.type===null) {
         options.type="GET";
    }

    if(options.data===null) {
        options.data={};
    }

    if(options.url===null) {
        options.url='/';
    }

    if(options.cache===null) {
        options.cace=false;
    }

    if(options.highlight===null || options.highlight===true) {
        options.highlight=true;
    } else {
        options.highlight=false;
    }

    $.ajax({
        type: options.type,
        url: options.url,
        data: options.data,
        beforeSend: function() {
            /* if this is the first ajax call, block the screen */
            if(++ajax_count==1) {
                $.blockUI({message:'Loading data, please wait'});
            } 
        },
        success: function(responseText) {
            /* we want to perform different methods of assignment depending on the element type */

            if($(options.target).is("input")) {
                $(options.target).val(responseText);
            } else {
                $(options.target).html(responseText);
            }
            /* fire change, fire highlight effect... only id highlight==true */
            if(options.highlight===true) {
                $(options.target).trigger("change").effect("highlight",{},2000);
            }
        },
        complete: function () {
            /* if all ajax requests have completed, unblock screen */
            if(--ajax_count===0) {
                $.unblockUI();
            }
        },
        cache: options.cache,
        dataType: "html"
    });
}

这个解决方案怎么样，我有一个 rules.js，其中包含我与元素的所有初始绑定，如果我要将它们放在一个函数中，然后在 ajax 方法的成功回调中调用该函数，这样我不会重复代码...

嗯，请思考：D

Answer 1

你可以这样做：

function createPickers(context) {
  $(".datefield", context || document).datepicker({
    showAnim:'fadeIn',
    dateFormat:'dd/mm/yy',
    changeMonth:true,
    changeYear:true
  });
}

要在document.ready 上运行，如果你已经有一个document.ready 函数，你可以调用：

createPickers();

或者你可以在it's own document.ready handle中运行它，像这样：

$(createPickers);

在您的 success 回调中，您可以这样称呼它：

createPickers(responseText);

这只是在提供的上下文中选择.datefield（内部使用.find()），所以document.ready你选择所有匹配的元素来创建日期选择器，但是在您的 ajax 请求中，您只选择刚刚到达响应中的匹配元素，而不是在任何地方创建重复的日期选择器。

Answer 2

如果您尚未阅读此问题，则首先要阅读此问题：
jQuery live() failing with jQuery UI datepicker

“我已经让它在灯箱第一次出现时绑定到灯箱的输入，但之后它就不起作用了。”

“当灯箱关闭时，我将其内容重新附加到页面（为了不丢失内容 div），这似乎正在杀死 live() 调用。”

Answer 3

日期选择器是文本输入伙伴上的点击功能。所以你可以轻松地去：

$('#datepicker').live('click', function(){$(this).datepicker($.datepicker.regional['en']);})