jQuery日期选择器在AJAX之后不会持续 [英] jQuery date picker not persistant after AJAX

问题描述

所以我正在使用jQuery日期选择器，它的效果很好。我正在使用AJAX去获取一些内容，显然当这个新内容被应用时，绑定就会丢失，我了解了上周，并发现了 .live（）方法。

So I'm using the jQuery date picker, and it works well. I am using AJAX to go and get some content, obviously when this new content is applied the bind is lost, I learnt about this last week and discovered about the .live() method.

但是我如何将其应用于我的日期选择器？因为这不是一个事件因此 .live（）将无法帮助...对吗？

But how do I apply that to my date picker? Because this isn't an event therefore .live() won't be able to help... right?

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

This is the code I'm using to bind the date picker to my input:

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

每次我的AJAX触发时，我都不想称之为metho，因为我想保持为通用

I do not want to call this metho everytime my AJAX fires, as I want to keep that as generic as possible.

干杯： - ）

编辑

作为@nick请求，下面是我的包装函数得到 ajax（）方法：

As @nick requested, below is my wrapper function got the ajax() method:

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方法的成功回调，这样我不会重复代码...

What about this solution, I have a rules.js which include all my initial bindings with the elements, if I were to put these in a function, then call that function on the success callback of the ajax method, that way I wouldn't be repeating code...

嗯，想法：D

推荐答案

你可以这样做：

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

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

To run on document.ready, if you already have a document.ready function you can call:

createPickers();

或者您可以在它是自己的 document.ready 句柄，像这样：

Or you can run it in it's own document.ready handle, like this:

$(createPickers);

在您的成功回调中，您称之为这个：

In your success callback you call it like this:

createPickers(responseText);

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

What this does is only select .datefield in the provided context (internally this uses .find()), so on document.ready you're selecting all matching elements to create date pickers, but in your ajax request, you're selecting only the matching elements that just arrived in the response, not creating duplicate date pickers anywhere.

这篇关于jQuery日期选择器在AJAX之后不会持续的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！