jquery datepicker no funciona después de la llamada ajax si ya está en la página

Ya tengo una entrada de selector de fecha (llámela X) en mi página. Hay un botón que cuando haces clic en él, hace una llamada ajax e imprime algunas cosas html en la página. Dentro de esa respuesta ajax, hay otra entrada de selector de fecha (llámela Y), que funciona cuando la abre en una página independiente, pero dentro de la llamada ajax, la Y no muestra el cuadro del selector de fecha (funciona en X).

La Y ya tiene la clase “hasDatepicker”, he intentado eliminarla y luego recordar el método datePicker, pero no tuve suerte. La única forma en que me las arreglé para solucionarlo fue eliminar el “ui-datepicker-div” de la fuente de la página y recuperar el selector de fecha en Y. ¡Pero esta vez, X deja de funcionar!

¿Qué hay de malo con esta forma de usar datepicker? ¿De alguna manera puedo hacer que ambos funcionen correctamente?

ACTUALIZACIÓN: Me las arreglé para solucionar esto ejecutando estos dos comandos antes de la llamada ajax y luego recordando el selector de fecha después de la llamada ajax:

jQuery('.datepicker').datepicker("destroy"); jQuery('#ui-datepicker-div').remove(); 

No sé por qué, pero el comando de destrucción no elimina el ui-datepicker-div y tengo que eliminarlo manualmente. ¿Alguna pista sobre esto?

Para el selector de datos agregado dinámicamente

 $('body').on('focus',".datepicker", function(){ $(this).datepicker(); });​ 

Manifestación

Rompí mi cabeza con este problema por unos días y finalmente logré resolverlo.

Solo debe eliminar antes de reinicializar desde DOM algunos div que hayan sido creados por jQuery.

Es:

jQuery('#ui-datepicker-div').remove();

jQuery no reinicializa DatePicker si este div está presente en DOM.

Mi código de trabajo aquí:

 jQuery(document).ready(function () { InitDatePickers(); }); function RemoveDatePickers() { jQuery('#ui-datepicker-div').remove(); } function InitDatePickers() { $('#main .date_inp').datepicker($.datepicker.regional["ru"]); } function RefreshData() { RemoveDatePickers(); $.ajax({ type: 'GET', url: "/", data: GetFiltersData(), success: function (data, textStatus) { $("#main").html(data); InitDatePickers(); } }); } 

¡Disfruten chicos!

Mi solución de trabajo para este problema es eliminar la clase hasDatepicker del elemento con datepicker después de la llamada ajax, luego reinicializar datepicker

 $("#start").removeClass("hasDatepicker"); jQuery("#start").datepicker({ constrainInput: false, dateFormat: "yy-mm-dd", showButtonPanel: true }); 

Los elementos agregados por AJAX no tienen métodos o eventos vinculados a ellos de forma hereditaria, ya que se crearon DESPUÉS DE QUE el DOM se haya cargado. Puedes solucionar esto con la delegación de eventos. Sin embargo, hay un mejor método para lo que estás tratando de hacer. En lugar de agregar el datepicker después, ¿por qué no solo tenerlo oculto? Si esa no es una opción, entonces debe volver a vincular la instancia del selector de fecha en su éxito ajax.

 success: function(data){ $('body').append(//code to create new_ele); //fire off the datepicker again. $('new_ele').datepicker(); }