jQuery datepicker nie będzie działać na AJAX dodaje element HTML

Question

Mam jQuery Datepicker funkcji związany z "Birthday" element html wejściowe, napisany w nagłówku strony:

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

Następnie mam trochę AJAX funkcjonalność - dodaje nowy element html wejściowy do strony. Ten element jest:

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

Kliknięcie tego urodziny elementu nie pop-up wyboru daty poniższego pola tekstowego. Spodziewałem się tego, ponieważ element jest dodawany po załadowaniu strony, a więc nie jest związany z funkcją podaną w nagłówku.

Jak mogę to sprawić? Próbowałem przenieść skrypt z nagłówka do treści, ale nic nie działa. Dzięki.

P.S. Jeśli utworzę wejściowy element html o id = "birthday" w treści strony, everythig działa zgodnie z oczekiwaniami. Wygląda na to, że tylko elementy dodane przez AJAX są dysfunkcyjne.

Answer 1

Trzeba użyć .live() tak, aby wszystkie nowo dodane elementy mają obsługi zdarzeń załączone: http://api.jquery.com/live/

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

EDIT

.live() documentation stwierdza, że ​​jest to nieco nieaktualne . W nowych wersjach jquery (1.7+) użyj .on().

Answer 2

Można zainicjować wyboru daty dla nowo dodanego elementu w swoim ajax sukcesu zwrotnego:

$.ajax({ 

    ... 

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

Answer 3

Boris, JK: To było bardzo pomocne dla mnie. Odkryłem także, że można korzystać z następujących powodów dla AJAX html jeśli chcesz używać DatePicker za wybór Zakres dat:

$('#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

Jestem trochę późno do partii, ale dla dokładności - oraz z funkcją .live() bycia deprecated from jQuery 1.7 i dalej - Myślałem, że dostarczę zaktualizowane rozwiązanie oparte na moich doświadczeniach i od wszelkiej pomocy, jaką uzyskałem od innych odpowiedzi na temat StackOverflow!

Miałem sytuację, w której musiałem dodać funkcjonalność datepicker do pól wejściowych, które były dodawane do DOM przez wywołania AJAX losowo, i nie mogłem modyfikować skryptu wykonującego wywołania AJAX w celu dołączenia funkcji datepicker, więc zdecydowałem się na nową błyszczącą .on() funkcji z jego cech delegacji:

// 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"); 
     } 
    }); 
}); 

mam nadzieję, że ktoś pomoże, i dzięki za wszystkie odpowiedzi tak daleko, że doprowadził mnie do takiego rozwiązania, że ​​pracował dla mnie! :)

Answer 5

Dostałem kolejną sprawę. Mój skrypt kopiuje ostatnie elementy tabeli, w tym datepicker.

JQuery nie będzie działać, ponieważ skopiowany element ma znak "hasDatepicker".

Aby aktywować datepicker w nowym elemencie, usuń tę nazwę klasy i zainicjuj ją w ten sposób.

$ ("# yournewelementid"). Attr ("class", "twoja-klasa-nazwisko"); $ ("# yournewelementid"). Datepicker();

Answer 6

Twój problem występuje zawsze, gdy elementy nie istnieją podczas próby zainicjowania.

Podczas korzystania z $ (function() {/** niektóre kod **/}); elementy muszą pojawiać się na dokumencie, oznacza to, że musi znajdować się na html, aby można było utworzyć funkcję inicjującą komponent lub zainicjować go po zdarzeniu powodzenia po dodaniu go do dokumentu.

Ważne jest, aby najpierw dodać zewnętrzne ładowanie html w żądaniu ajax do dokumentu, zanim spróbujesz go zainicjować lub nie zostanie ono w ogóle zainicjowane.
przykład:

$ .ajax ({
        URL "ajax_html.html"
        dataType "HTML"
}). Sporządzono (funkcja (HTML) {
        $ ("# selektor"). html (html)
        init();
}); .

funkcja init() {
        $ ("urodziny") datepicker ({});
}