¿Cómo enlazar jQuery Datepicker después de actualizar Ajax?

Tengo un selector de fecha jQuery que funciona muy bien para mí, excepto que cuando actualizo el contenido a través de ajax, pierdo el selector de fecha. Por lo que puedo decir, debería usar jQuery on () para enlazarlo a la entrada, pero parece que no puedo encontrar el evento correcto al que enlazarlo.

Funciona la primera vez, pero no en actualizaciones posteriores:

$("[id^=startPicker]").datetimepicker({ showOn: "button", buttonImage: "/img/calendar_icon.png", buttonImageOnly: true, dateFormat: 'mm/dd/yy', timeFormat: 'hh:mm tt', stepMinute: 1, onClose: function (dateText, inst) { var selectedDate = $(this).datepicker("getDate"); //Date object $.ajax({ url: "/url", dataType: "json", method: 'post', data: { value: selectedDate.toDateString() + ' ' + selectedDate.toTimeString() }, beforeSend: function () { $("#loading").fadeIn(); }, success: function (data, textStatus) { $("#content").html(data); }, complete: function () { $("#loading").fadeOut(); } }); } }); 

No se une por primera vez o en actualizaciones posteriores:

 $('#content').on('ready', "[id^=startPicker]", function () { $(this).datetimepicker({ showOn: "button", buttonImage: "/img/calendar_icon.png", buttonImageOnly: true, dateFormat: 'mm/dd/yy', timeFormat: 'hh:mm tt', stepMinute: 1, onClose: function (dateText, inst) { var selectedDate = $(this).datepicker("getDate"); //Date object $.ajax({ url: "/url", dataType: "json", method: 'post', data: { value: selectedDate.toDateString() + ' ' + selectedDate.toTimeString() }, beforeSend: function () { $("#loading").fadeIn(); }, success: function (data, textStatus) { $("#content").html(data); }, complete: function () { $("#loading").fadeOut(); } }); } }); }); 

La función jQuery .on() es para el manejo de eventos diferidos, pero no funciona para la inicialización del complemento.

Funciona para eventos porque el modelo DOM propaga eventos de elementos DOM a sus elementos principales, hasta la parte superior. Por lo tanto, cuando hace clic en un enlace, también hace clic en lo que contiene ese enlace (un div por ejemplo), lo que contiene ese contenedor, y así sucesivamente hasta la etiqueta del body y, finalmente, el propio document . .on() aprovecha esto vinculando el evento de clic de un elemento primario común en lugar de los elementos secundarios dynamics, por lo que los elementos secundarios se pueden agregar / eliminar sin perder el controlador de eventos en el principal.

Sin embargo, la inicialización del complemento no funciona de esta manera. Para inicializar un complemento en un elemento de destino, debe realizarse en el propio elemento, lo que significa que el elemento debe estar en el DOM en ese momento. Por lo tanto, cuando agrega dinámicamente nuevos elementos, debe apuntar a esos nuevos elementos e inicializar el complemento en ellos. Así que su función de success de la llamada AJAX tendría que hacer eso.

Tenga en cuenta que dado que su llamada AJAX se encuentra dentro de su inicialización, tendrá que dividir algunas de ellas en funciones separadas para reutilizarlas. De lo contrario, esta reinicialización se anidaría dentro de sí misma indefinidamente.

Tal vez algo como esto:

 var datePickerClose = function (dateText, inst) { var selectedDate = $(this).datepicker("getDate"); //Date object $.ajax({ url: "/url", dataType: "json", method: 'post', data: { value: selectedDate.toDateString() + ' ' + selectedDate.toTimeString() }, beforeSend: function () { $("#loading").fadeIn(); }, success: function (data, textStatus) { $("#content").html(data); $("#content").find("[id^=startPicker]").each(function () { bindDatePicker(this); }); }, complete: function () { $("#loading").fadeOut(); } }); }; var bindDatePicker = function(element) { $(element).datetimepicker({ showOn: "button", buttonImage: "/img/calendar_icon.png", buttonImageOnly: true, dateFormat: 'mm/dd/yy', timeFormat: 'hh:mm tt', stepMinute: 1, onClose: datePickerClose }); }; $("[id^=startPicker]").each(function() { bindDatePicker(this); }); 

Esto es, por supuesto, un código no probado a mano libre solo para demostrar el concepto. Puede requerir un poco de ajuste y puede haber una forma más elegante de lograr la misma lógica.

No puede delegar el complemento, la delegación es solo para el detector de eventos. Use la función de callback exitosa y vuelva a activar el complemento datepicker una vez que se agregue el elemento objective

 success: function (data, textStatus) { $("#content").html(data).find('[id^=startPicker]').datepicker({...}); }, 

Tengo un problema similar: después de una recarga de la página ajax no puedo configurar el nuevo selector de fecha con $ (elemento) .datepicker () . Debido a que Datepicker solo realiza una inicialización limpia, simplemente lo establecí directamente después del éxito de ajax:

 $.datepicker.initialized = false; 

Ahora el siguiente $ (elemento) .datepicker () causará una nueva inicialización. Esto afecta a todo el datepicker en el lateral, por lo que es posible que haya restablecido el selector de datos fuera del contenedor ajax.

En realidad, la forma más sencilla que he encontrado para hacer esto es simplemente colocando el código de enlace dentro de la función de éxito así: ELEMENT.datepicker(); .

Por ejemplo: $('.datepicker').datepicker();

Código completo:

 $('#loaddetails').on('click',function(){ //Run ajax fetch here $.ajax({ type: "POST", url: "yourlink", data: $('form').serialize(), // serializes the form's elements. dataType: 'json', beforeSend: function () { console.log('Form serialised'); $('#status').html(''); }, success: function(data) { $('#status').html(data); $('.datepicker').datepicker(); }, error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); } }); console.log("All ok"); return false; });