jQuery datepicker won't work on a AJAX added html element

Question

I have a jQuery datepicker function bound to the \"birthday\" input html element, written in the page header:

Answer 1

You could initialize the date picker for the newly added element within your ajax success callback:

 $.ajax({

    ...

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

Answer 2

You need to use .live() so that any newly added elements have the event handler attached: http://api.jquery.com/live/

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

EDIT

.live() documentation states, that it is a bit out of date. With new versions of jquery (1.7+) use .on().

Answer 3

Boris, JK: This was super helpful for me. I have also found that you can use the following for AJAX html if you want to use Datepicker's date range selection:

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

I'm a bit late to the party, but for thoroughness - and with the .live() function being deprecated from jQuery 1.7 onwards - I thought I'd provide an updated solution based on my experiences, and from all the help I got from other answers on StackOverflow!

I had a situation where I needed to add the datepicker functionality to input fields that were being added to the DOM through AJAX calls at random, and I couldn't modify the script making the AJAX calls to attach the datepicker functionality, so I opted for the new shiny .on() function with its delegation features:

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

I hope this helps someone, and thanks for all the answers so far that led me to this solution that worked for me! :)

Answer 5

I got another case. My script is copying last table elements including datepicker.

The jquery will not working because the copied element has mark that it "hasDatepicker".

To activate datepicker in new element, remove that class name and the initiate it, like this.

$("#yournewelementid").attr("class","your-class-name"); $("#yournewelementid").datepicker();

Answer 6

your issue is always happens when elements don't exist when you try to initialize it.

When you use $(function(){/** some code **/}); elements must exsit on the document, it means that has to be on the html so you could can create a function to initialize the component or initialize it on the success event after been add it to the document.

Is important to first add the external html load in the ajax request to the document before you try to initialize it or it won't be initialize at all.
Example:

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

function init(){
     $(".birthday").datepicker({});
}