代码之家 › 专栏 › 技术社区 › Ben Everard

jQuery日期选取器在Ajax之后不持久

jquery datepicker binding

Ben Everard · 技术社区 · 14 年前

所以我使用jquery日期选择器,它工作得很好。我使用Ajax来获取一些内容,显然当应用这个新内容时,绑定会丢失,我 learnt about this last week 发现了 .live() 方法。

但我该如何将其应用于我的日期选择器呢?因为这不是一个事件所以 LIVER() 无法帮助…正确的?

这是用于将日期选取器绑定到输入的代码:

$(".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

3 回复 | 直到 14 年前

Nick Craver 14 年前

你可以这样做:

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

继续运行 document.ready ,如果您已经有了 准备好文件 您可以调用的函数:

createPickers();

或者你可以运行它 it's own document.ready handle ,像这样:

$(createPickers);

在你 success 回拨你这样叫它:

createPickers(responseText);

这只是选择 .datefield 在提供的上下文中 (内部使用 .find() 等等 准备好文件 您选择所有匹配的元素来创建日期选择器,但是在Ajax请求中,您只选择刚刚到达响应中的匹配元素,而不在任何地方创建重复的日期选择器。

Community Stefan Steinegger 7 年前

如果您还没有:
jQuery live() failing with jQuery UI datepicker

“我已经将它绑定到lightbox第一次出现时的lightbox输入,但之后它就不起作用了。”

“当lightbox关闭时,我将把它的内容追加到页面上(为了不丢失content div),这似乎扼杀了live()调用。”

Ali Habibzadeh 14 年前

日期选取器是文本输入配对上的一个单击函数。所以你可以很容易地去:

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