not - jquery-ui datepicker con el evento jquery.on()

datepicker php

Question

Estoy usando asual jquery-address, ejemplo de pestañas y quiero agregar datepicker a la pestaña "Extra". Si solo estoy agregando

$(document).ready(function() {
    $( "#datepicker" ).datepicker();
});

no funcionará Entonces descubrí que tengo que usar .live (). Como estoy usando jquery-1.7 .live () ha cambiado a .on ().

Si agrego este código, datepicker solo funciona en el segundo clic.

$(document).ready(function() {
  $(document).on(''click'', ''#datepicker'', function () {
    $(this).datepicker();
  });
});

Vi en otro hilo una forma no recomendada de hacerlo funcionar así

$(document).ready(function() {
  $(document).on(''click'', ''#datepicker'', function () {
    $(this).datepicker().datepicker( "show" );
  });
});

¿Cómo lo estoy usando correctamente? ¿Hay alguna manera recomendada de hacer que datepicker funcione como quiero en este ejemplo?

Creo que necesito usar .on () porque quiero volver a cargar el formulario que incluye # datepicker con un evento .load ().

Answer 1

Para recorrer sus tres enfoques, el primero falla porque está configurado de manera tal que #datepicker aún no está definido. Puede verificar esto reemplazándolo con la alert($(''#datepicker'').length) y viendo que es cero.

El segundo enfoque toma dos clics porque datepicker no tiene conocimiento del primer clic porque se creó después de que se produjo el clic.

El tercer enfoque funciona porque obliga al datepicker a aparecer después del primer clic. Eso está bien, pero es un poco inútil porque después de configurar el selector de fecha, tiene su propio detector de eventos que lo hará aparecer cuando se inicie el clic.

Volviendo a su primer enfoque, no funcionaba porque #datepicker aún no existía. Puedes hacer que esto funcione moviendo (''#datepicker'').datepicker() a después del punto en el código donde se crea.

Si esto no es posible, puede hacerlo para que su función solo se dispare en el primer clic utilizando el tercer enfoque pero cambiando de one a one . Esto hará que el primer clic sea su oyente de evento que crea y muestra el selector de fecha. Después de eso, se eliminará su detector de eventos y solo existirá el oyente selector de fechas integrado.

Dicho esto, realmente odio $(document).on(''click'', ... porque evalúa cada vez que hace clic en la página. Captura el evento en el nivel del documento y luego compara cada elemento de la lista de objetivos con el selector. Esto es lento y realmente suma si tiene muchos de ellos. Si debe usar un oyente delegado, debe moverlo al padre más cercano. Por ejemplo, si #datepicker siempre aparece en #form1 , podría hacer $(''#form1'').on(''click'', ... en su lugar, y reduzca su procesamiento.

Answer 2

Su solución convierte el campo con id ''datepicker'' en un datepicker al hacer clic en él. Entonces, el primer clic convierte el campo de entrada en un selector de fecha. El segundo clic abre el marcador de fecha (y por cierto, convierte el campo de entrada en un marcador de fecha usando jQuery).

¿Qué tal si agregamos el script para crear el datepicker al final del HTML de Extra Tab (el HTML que se carga con este enlace: http://www.asual.com/jquery/address/samples/tabs/extras.html )?

<!-- This is "Extra" Tab -->
<input id="datepicker">
<script>
    $(''#datepicker'').datepicker();
</script>

Answer 3

Pruebe el ejemplo de código a continuación:

$(document).on("focus", "#datepicker", function () {
    $("#datepicker").datepicker();
});

Answer 4

Usaría una carpeta de eventos ya que está usando el widget jquery.tab.

algo así como

$( ".selector" ).tabs({
activate: function( event, ui ) {

    if(window.location.indexOf("#Extra") >= 0)
    {
      $("#datepicker").datepicker();
    }
}
});

Entonces debería funcionar. Tenga en cuenta que si esto no funciona intente vincular el evento como este

$(".selector").bind("activate",function(){});

Saludos