jQuery DatePicker non funziona su un AJAX aggiunto elemento HTML

Question

Ho un jQuery datepicker funzione legata al elemento di input html "compleanno", scritto nella pagina di intestazione:

<script type="text/javascript"> 
    $(function() { 
     $("#birthday").datepicker(); 
    }); 
</script> 

Avanti, ho un po 'di AJAX funzionalità - aggiunge un nuovo elemento html di input alla pagina. Tale elemento è:

<input type="text" id="birthday" value="" class="detail-textbox1" /> 

Cliccando su quel compleanno elemento non comparirà il selettore data sotto il campo di testo. Mi aspettavo questo, poiché l'elemento viene aggiunto dopo che la pagina è stata caricata, quindi non è in relazione con la funzione fornita nell'intestazione.

Come posso farlo funzionare? Ho provato a spostare lo script dall'intestazione al corpo, ma niente sembra funzionare. Grazie.

P.S. Se creo un elemento html di input con id = "birthday" nel corpo della pagina, everythig funziona come previsto. Sembra che solo gli elementi aggiunti tramite AJAX siano disfunzionali.

Answer 1

è necessario utilizzare .Live() in modo che tutti gli elementi appena aggiunti hanno il gestore di eventi allegato: http://api.jquery.com/live/

$('#birthday').bind('load', function() { 
    $(this).datepicker(); 
}); 

EDIT

.live() documentation stati, che è un po 'fuori moda . Con le nuove versioni di jquery (1.7+) utilizzare .on().

Answer 2

Si potrebbe inizializzare il selettore data per l'elemento appena aggiunto all'interno del vostro successo callback Ajax:

$.ajax({ 

    ... 

    success: function(response) { 
     if(response.success) { 
       $(body).append(response.html); 
       $("#birthday").datepicker(); 
     } 
    } 
}); 

Answer 3

Boris, JK: Questa era super disponibile per me. Ho anche scoperto che è possibile utilizzare il seguente per AJAX HTML se si desidera utilizzare la selezione di date di Datepicker:

$('#groundtransporation').live('focus', function() { 
var gt = $("#rentalPickUp, #rentalDropOff").datepicker({ 
    defaultDate: "+1w", 
    changeMonth: true, 
    numberOfMonths: 2, 
    onSelect: function(selectedDate) { 
    var option = this.id == "rentalPickUp" ? "minDate" : "maxDate", 
     instance = $(this).data("datepicker"), 
     date = $.datepicker.parseDate(
     instance.settings.dateFormat || 
     $.datepicker._defaults.dateFormat, 
     selectedDate, instance.settings); 
    gt.not(this).datepicker("option", option, date); 
    } 
}); 
}); 

Answer 4

Sono un po 'in ritardo alla festa, ma per completezza - e con la funzione .live() essere deprecated from jQuery 1.7 in poi: pensavo di fornire una soluzione aggiornata basata sulle mie esperienze e da tutto l'aiuto che ho ricevuto da altre risposte su StackOverflow!

Avevo una situazione in cui avevo bisogno di aggiungere la funzionalità datepicker per immettere campi che venivano aggiunti al DOM tramite chiamate AJAX a caso, e non potevo modificare lo script effettuando le chiamate AJAX per collegare la funzionalità datepicker, così ho optato per la nuova funzione lucido .on() con le sue funzionalità di delega:

// do this once the DOM's available... 
$(function(){ 

    // this line will add an event handler to the selected inputs, both 
    // current and future, whenever they are clicked... 
    // this is delegation at work, and you can use any containing element 
    // you like - I just used the "body" tag for convenience... 
    $("body").on("click", ".my_input_element", function(){ 

     // as an added bonus, if you are afraid of attaching the "datepicker" 
     // multiple times, you can check for the "hasDatepicker" class... 
     if (!$(this).hasClass("hasDatepicker")) 
     { 
      $(this).datepicker(); 
      $(this).datepicker("show"); 
     } 
    }); 
}); 

Spero che questo aiuta qualcuno, e grazie per tutte le risposte finora che mi ha portato a questa soluzione che ha funzionato per me! :)

Answer 5

Ho un altro caso. Il mio copione sta copiando gli ultimi elementi della tabella incluso datepicker.

jquery non funziona perché l'elemento copiato ha contrassegnato "hasDatepicker".

Per attivare datepicker in un nuovo elemento, rimuovere il nome di classe e avviarlo, in questo modo.

$ ("# yournewelementid"). Attr ("classe", "nome-classe"); $ ("# yournewelementid"). Datepicker();

Answer 6

il problema si verifica sempre quando gli elementi non esistono quando si tenta di inizializzarlo.

Quando si utilizza $ (function() {/** codice **/}); Gli elementi devono essere presenti sul documento, significa che deve essere presente nel codice HTML in modo da poter creare una funzione per inizializzare il componente o inizializzarlo sull'evento di successo dopo averlo aggiunto al documento.

È importante innanzitutto aggiungere il carico HTML esterno nella richiesta Ajax al documento prima di provare a inizializzarlo o non verrà affatto inizializzato.
Esempio:

$ .ajax ({
        url: "ajax_html.html",
        dataType: "html"
}). Done (function (html) {
        $ ("# selettore"). html (html)
        init();
}); .

funzione init() {
        $ ("compleanno") datepicker ({});
}