collapsible - ¿Por qué el marcador de jQuery UI rompe con un DOM dinámico?

tooltip jquery

Question

Estoy trabajando con un DOM dinámico aquí, y he llamado jQuery UI datepicker a todas las entradas con un nombre de clase específico, en este caso .date

Funciona muy bien con el primer constructo estático, pero cuando lo clono, los controladores de eventos no parecen querer moverse. Aparece el error Firebug:

inst no está definido

Intenté investigar la nueva función live() jQuery pero no pude combinar los dos. ¿Algunas ideas?

Answer 1

Ah, lo tengo. Justo después de anexar el HTML al DOM, ejecuto esto en todas las entradas con las que me gustaría tener un selector de fecha. Datepicker agrega una clase a los elementos a los que se ha adjuntado, por lo que podemos filtrar las entradas existentes y solo aplicarlas a las nuevas.

$(''.date'').not(''.hasDatePicker'').datepicker();

Espero que esto ayude a las personas, ya que estaba buscando en Google por días y ¡no encontré nada!

También debe tener en cuenta que sería más rápido verificar input.date en el nuevo HTML generado al configurarlo como contexto, en lugar de toda la página, ya que ahorrará tiempo, ya que se trata de una operación más eficiente.

Answer 2

Debe usar el evento ''en vivo'' para que funcione con DOM dinámico. Por lo tanto, si la clase para sus entradas datepicker es ''entrada de fecha'', el siguiente código lo hará funcionar:

$(document).ready(function() {
$(''.date-input'').live(''click'', function() {
$(this).datepicker(''destroy'').datepicker({showOn:''focus''}).focus();
});
});

Answer 3

Después de probar muchas de las respuestas aquí, esto es lo que funcionó para mí y se muestra en el primer clic / foco

function vincularDatePickers() {
$(''.mostrar_calendario'').live(''click'', function () {
$(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: ''focus'' }).focus();
});
}

esto necesita que su entrada tenga la clase ''mostrar_calendario''

en vivo es para JQuery 1.3+ para las versiones más nuevas, necesita adaptar esto a "on"

Vea más sobre la diferencia aquí http://api.jquery.com/live/

Answer 4

Esto podría ser un poco tarde, pero todas las sugerencias anteriores no me funcionaron, se me ocurrió una solución fácil para esto.

Primero, qué está causando el problema: JQuery asigna datepicker al elemento id. si está clonando un elemento, también se puede clonar el mismo id. que a jQuery no le gusta Puede terminar recibiendo el error de referencia nulo o la fecha asignada al primer campo de entrada, sin importar en qué campo de entrada haga clic.

Solución:

1) destruir datepicker 2) asignar nuevos ids únicos a todos los campos de entrada 3) asignar datepicker para cada entrada

Asegúrate de que tu entrada sea algo como esto

<input type="text" name="ndate[]" id="date1" class="n1datepicker">

Antes de clonar, destruye el marcador de fecha

$(''.n1datepicker'').datepicker(''destroy'');

Después de clonar, agregue estas líneas también

var i = 0;
$(''.n1datepicker'').each(function () {
$(this).attr("id",''date'' + i).datepicker();
i++;
});

y la magia sucede

Answer 5

Experimenté el mismo síntoma, en esto causado por tener un elemento que contiene td con el mismo atributo de identificación que la entrada,

 <td id="fld_xyz"><input id="fld_xyz" class="date" /></td>

Sé que esto no es ideal de todos modos, pero vale la pena saber que el componente datepicker parece depender de la singularidad de la identificación.

Answer 6

Hoy me enfrenté al mismo problema ... Estoy usando el complemento datetimepicker en mi aplicación.
También usando el marcador de fecha predeterminado de jquery también. Cuando alguna vez los invoco a ambos en el documento listo, estoy obteniendo el error inst is undefined .

 $(document).ready(function(){
$(".datepickerCustom").datetimepicker();
$(".datepicker").datepicker();
$("#MainForm").validationEngine(''attach'');
....
});

Así que cambié el código para invocar antes de que el documento esté listo como se muestra a continuación:

 $(".datepickerCustom").datetimepicker();
$(".datepicker").datepicker();
$(document).ready(function(){
$("#MainForm").validationEngine(''attach'');
....
});

Ahora todo está funcionando bien. No hay problemas.

Answer 7

Si aún no funciona, se debe a la identificación clonada. Puede eliminar completamente datepicker de la siguiente manera: $(selector).removeClass(''hasDatepicker'').removeAttr(''id'').datepicker();

Answer 8

Tenía un problema similar, tenía varias tablas en una página y cada una tenía múltiples fechadores, también al hacer clic en el botón "AddLine" agregaba una fila de la tabla con HTML dinámico y datepicker.

Me di cuenta después de una gran cantidad de búsquedas que mis campos de fecha de entrada no tenían definido "id", se veían así

<input type="text" class="datepicker" name="mDate1" value="" size=8 >

jquery apuntaba todos los valores de los campos de fecha al primer campo de fecha definido en la página, el calendario aparecía en todos los campos de fecha, pero el valor del campo de la primera fecha cambiaba, hice un cambio al html como este

<input type="text" class="datepicker" id="Date1" name="mDate1" value="" size=8 >

agregando un "id" y comenzó a funcionar, para los campos de fecha dinámica cambio el Id como este

var allColumns = $("#"+$tableId+" tr:last td");
$(allColumns).each(function (i,val) {
if($(val).find(":input").hasClass("datepicker")){
$(val).find(":input").attr("id",newId+$(val).find(":input").attr("id"));
}
});

Answer 9

Tuve este problema Mi situación terminó siendo que tenía otro elemento con la misma ID que la entrada con el marcador de fecha.

Answer 10

Tuve un problema similar con el selector de datos que no funciona después de una primera llamada. Encontré una respuesta a mi problema aquí:

http://www.stemkoski.com/problem-with-jquery-ui-datepicker-dynamic-dom/

Estaba clonando secciones dinámicamente de la plantilla e inadvertidamente, incluyendo la clase que datepicker agrega una vez que se llama:

hasDatepicker

Hice mi primera llamada datepicker después de clonar la plantilla y eso lo hizo. Luego agregué una llamada datepicker después de cada instancia de clon:

$(source).clone().appendTo(destination).find(".datepicker").datepicker();

Answer 11

Use los selectores de jQuery:

$(".mydatepicker:not(.hasDatepicker)").datepicker()

Answer 12

Utilizar

$j(id or class).removeClass(''hasDatepicker'').datepicker();

Está funcionando

Answer 13

Varias instancias de la biblioteca jquery-ui en la página también causarán este error. Eliminar instancias redundantes funciona para mi caso