jQuery datepicker sẽ không hoạt động trên một AJAX thêm html yếu tố

Question

Tôi có một jQuery datepicker chức năng ràng buộc với "sinh nhật" yếu tố html đầu vào, được viết trong tiêu đề trang:

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

Tiếp theo, tôi có một số AJAX chức năng - nó thêm phần tử html đầu vào mới vào trang. yếu tố đó là:

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

Nhấp vào mà sinh nhật yếu tố không bật lên bộ chọn ngày bên dưới trường văn bản. Tôi mong đợi điều này, vì phần tử được thêm sau khi trang được tải, do đó nó không liên quan đến hàm được cung cấp trong tiêu đề.

Tôi làm cách nào để nó hoạt động? Tôi đã thử di chuyển kịch bản từ tiêu đề đến cơ thể, nhưng không có gì có vẻ hiệu quả. Cảm ơn.

P.S. Nếu tôi tạo phần tử html đầu vào có id = "birthday" trong phần nội dung trang, everythig sẽ hoạt động như mong đợi. Có vẻ như chỉ có các phần tử được thêm vào thông qua AJAX mới có chức năng rối loạn chức năng.

Answer 1

Bạn cần phải sử dụng .live() để cho bất kỳ yếu tố mới được thêm vào có xử lý sự kiện kèm theo: http://api.jquery.com/live/

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

EDIT

.live() documentation tiểu bang, mà nó là một chút trong ngày . Với phiên bản mới của jquery (1.7+), hãy sử dụng .on().

Answer 2

Bạn có thể khởi tạo bộ chọn ngày cho các phần tử mới được bổ sung trong vòng callback thành công ajax của bạn:

$.ajax({ 

    ... 

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

Answer 3

Boris, JK: Đây là siêu hữu ích cho tôi. Tôi cũng đã phát hiện ra rằng bạn có thể sử dụng sau đây cho AJAX html nếu bạn muốn sử dụng lựa chọn phạm vi ngày datepicker của:

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

tôi là một chút muộn để đảng, nhưng đối với triệt để - và cùng với .live() chức năng là deprecated from jQuery 1.7 trở đi - Tôi nghĩ rằng tôi muốn cung cấp một giải pháp cập nhật dựa trên kinh nghiệm của tôi, và từ tất cả sự giúp đỡ tôi nhận được từ các câu trả lời khác trên StackOverflow!

Tôi có tình huống cần thêm chức năng datepicker để nhập các trường được thêm vào DOM thông qua cuộc gọi AJAX ngẫu nhiên và tôi không thể sửa đổi tập lệnh thực hiện cuộc gọi AJAX để đính kèm chức năng datepicker, vì vậy tôi chọn cho bóng mới .on() chức năng với các tính năng phái đoàn của nó:

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

tôi hy vọng điều này sẽ giúp ai đó, và cảm ơn tất cả các câu trả lời cho đến nay mà dẫn tôi đến giải pháp này mà làm việc cho tôi! :)

Answer 5

Tôi có một trường hợp khác. Tập lệnh của tôi đang sao chép các phần tử bảng cuối cùng bao gồm cả datepicker.

Jquery sẽ không hoạt động vì phần tử được sao chép đã đánh dấu là "hasDatepicker".

Để kích hoạt datepicker trong phần tử mới, hãy xóa tên lớp đó và khởi tạo nó, như thế này.

$ ("# yournewelementid"). Attr ("class", "your-class-name"); $ ("# yournewelementid"). Datepicker();

Answer 6

sự cố của bạn luôn xảy ra khi các phần tử không tồn tại khi bạn cố gắng khởi tạo nó.

Khi bạn sử dụng $ (hàm() {/** một số mã **/}); Các thành phần phải xuất hiện trên tài liệu, có nghĩa là phải nằm trên html để bạn có thể tạo hàm để khởi tạo thành phần hoặc khởi tạo thành phần đó sau sự kiện thành công sau khi thêm nó vào tài liệu.

Điều quan trọng là trước hết hãy thêm tải html bên ngoài vào yêu cầu ajax vào tài liệu trước khi bạn cố gắng khởi tạo hoặc nó sẽ không được khởi tạo.
Ví dụ:

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

hàm init() {
        $ ("sinh nhật") datepicker ({});
}