AJAX后jQuery的日期选择器没有持续性

问题描述

所以我使用jQuery日期选择器，并且效果很好。我使用AJAX去得到一些内容，很明显，当应用此新的内容绑定丢失了，我的以及发现有关 .live（）方法。

但我怎么申请，为我的日期选择器？因为这不是一个事件，因此 .live（）将无法帮助...对吧？

这是code我使用绑定的日期选取器我输入：

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

我不希望每次调用此方法具我的AJAX火灾，因为我想保持这一尽可能通用。

干杯： - ）

修改

按照要求@nick，下面是我的包装的功能得到了 AJAX（）方法：

  VAR ajax_count = 0;
功能getElementContents（选项）{
    如果（options.type === NULL）{
         options.type =GET;
    }    如果（options.data === NULL）{
        options.data = {};
    }    如果（options.url === NULL）{
        options.url ='/';
    }    如果（options.cache === NULL）{
        options.cace = FALSE;
    }    如果（options.highlight ===空|| options.highlight ===真）{
        options.highlight = TRUE;
    }其他{
        options.highlight = FALSE;
    }    $阿贾克斯（{
        类型：options.type，
        网址：options.url，
        数据：options.data，
        beforeSend：功能（）{
            / *如果这是第一个Ajax调用，挡住屏幕* /
            如果（++ ajax_count == 1）{
                $ .blockUI（{消息：正在载入数据，请稍候'}）;
            }
        }，
        成功：函数（responseText的）{
            / *我们要执行取决于元素类型分配不同的方法* /            如果（$（options.target）。是（输入））{
                $（options.target）.VAL（responseText的）;
            }其他{
                $（options.target）的.html（responseText的）;
            }
            / *消防变化，火高亮效果......只有ID亮点==真* /
            如果（options.highlight ===真）{
                $（options.target）.trigger（变）的效果（亮点，{}，2000）。
            }
        }，
        完成：功能（）{
            / *如果所有的Ajax请求完成，疏通屏* /
            如果（ -  ajax_count === 0）{
                $ .unblockUI（）;
            }
        }，
        缓存：options.cache，
        数据类型：HTML
    }）;
}
 

这个解决方案，我有什么rules.js其中包括与所有元素我最初的绑定，如果我把这些在一个函数，然后调用该函数的AJAX方法的成功回调，这样我不会重复code ...

嗯，想法请：D

解决方案

您可以做到这一点是这样的：

 函数createPickers（上下文）{
  $（的DateField，上下文||文件）.datepicker（{
    showAnim：淡入，
    DATEFORMAT：'DD / MM / YY'，
    changeMonth：真实，
    changeYear：真
  }）;
}
 

要在的document.ready 运行，如果你已经有了一个的document.ready 功能，您可以拨打：

  createPickers（）;
 

或者你也可以在）等的document.ready 你'重新选择所有匹配的元素创建日期选择器，但在你的Ajax请求，你只选择刚到的响应，没有在任何地方创建重复日期选择器匹配的元素。

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.

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});

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

Cheers :-)

EDIT

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"
    });
}

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...

Hmmm, thoughts please :D

解决方案

You can do it like this:

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

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

createPickers();

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);

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.

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