Le sélecteur de date jQuery n'est pas persistant après AJAX

Question

J'utilise donc le sélecteur de date jQuery, et cela fonctionne bien. J'utilise AJAX pour aller chercher du contenu, évidemment quand ce nouveau contenu est appliqué, la liaison est perdue, j'ai learnt about this last week et découvert à propos de la méthode .live(). Mais comment l'appliquer à mon sélecteur de date? Parce que ce n'est pas un événement, donc .live() ne sera pas en mesure d'aider ... non?

C'est le code que je utilise pour lier le sélecteur de date à mon entrée:

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

Je ne veux pas appeler ce métho chaque fois que mes feux AJAX, comme je veux garder ce aussi générique que possible.

Vive :-)

EDIT

Comme demandé @ Nick, ci-dessous est ma fonction d'emballage a la méthode 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" 
    }); 
} 

Qu'en est cette solution, j'ai règles .js qui incluent toutes mes liaisons initiales avec les éléments, si je devais les mettre dans une fonction, alors appelez cette fonction sur le callback de succès de la méthode ajax, de cette façon je ne répèterais pas le code ...

Hmmm, pensées s'il vous plaît: D

Answer 1

Vous pouvez le faire comme ceci:

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

Pour exécuter le document.ready, si vous avez déjà une fonction document.ready vous pouvez appeler:

createPickers(); 

Ou vous pouvez l'exécuter en it's own document.ready handle, comme ceci:

$(createPickers); 

Dans votre success rappel vous l'appelez comme ceci:

createPickers(responseText); 

Que cela ne sélectionnez que .datefielddans le contexte fourni (interne utilise ce .find()), etc. document.ready vous choisissez tout correspondant éléments pour créer des sélecteurs de date, mais dans votre requête ajax, vous sélectionnez uniquement les éléments correspondants qui viennent d'arriver dans la réponse, sans créer de sélecteurs de dates en double.

Answer 2

La première escale serait de lire sur cette question, si vous avez pas déjà:
jQuery live() failing with jQuery UI datepicker

«J'ai réussi à le faire se lier aux entrées de lightbox sur la première apparition de la visionneuse, mais cela ne fonctionne pas après. " "Lorsque la visionneuse se referme, je réinscris son contenu sur la page (afin de ne pas perdre la div de contenu), ce qui semble tuer l'appel live()."

Answer 3

Le sélecteur de date est une fonction de clic sur l'entrée de texte.de sorte que vous pouvez facilement aller:

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