How to bind jQuery Datepicker after Ajax refresh?

Question

I\'ve got a jQuery datepicker that is working great for me, except when I fresh the content via ajax, I lose the datepicker. From what I can tell I should be using jQuery on

Answer 1

Actually, the simplest way I have found to do this is by simply putting the bind code within the success function like so: ELEMENT.datepicker();.

Eg: $('.datepicker').datepicker();

Full code:

$('#loaddetails').on('click',function(){
                //Run ajax fetch here
                    $.ajax({
                       type: "POST",
                       url: "yourlink",
                       data: $('form').serialize(), // serializes the form's elements.
                       dataType: 'json',
                       beforeSend: function () {
                         console.log('Form serialised');
                         $('#status').html('');
                         },
                       success: function(data)
                       {
                        $('#status').html(data);
                        $('.datepicker').datepicker();
                          },
                          error: function (xhr, ajaxOptions, thrownError) {
                            alert(xhr.status);
                            alert(thrownError);
                          }
                     });
                console.log("All ok");
                return false;
            });