Datepicker stops working on reloads/paging

Question

I'm having trouble combining paged results with datepicker inputs. The results are loaded via .post that resets a table inside a div (simulated in the example below as a button click).

This fiddle helps illustrate what is happening, but the actual content will not be as similar as that example (i.e. .html( $(elem).html() )).

Originally I had the .done function from the post run another $(".dt").datepicker() but this answer suggested the .on('focus',...) method.

score 1 · Accepted Answer · answered Oct 05 '15 at 16:09

This happens because the class '.hasDatepicker' still exist on the input after changing the id. Because of the class datepicker won't reinit.

Removing the class before adding the html will solve your problem.

var dateHMTL = 'Date 1<input id="dt1" class="dt" /><br/>Date 2<input id="dt2" class="dt" /><br/>Date 3<input id="dt3" class="dt" /><br/>Date 4<input id="dt4" class="dt" /><br/>Date 5<input id="dt5" class="dt" />'
$(function () {
    $(document).on('focus', ".dt", function () {
        $(this).datepicker();
    });

    $(document).on("click", "#btn", function (e) {
        e.preventDefault();
        dateHMTL = $("#theDIV").html();
        dateHMTL=dateHMTL.replace(/Date (\d+)/g,"Date 1$1");
        dateHMTL=dateHMTL.replace(/dt(\d+)/g,"dt1$1");
        dateHMTL=dateHMTL.replace(/hasDatepicker/g,"");
        $("#theDIV").html(dateHMTL);
    });

    $("#theDIV").html(dateHMTL)
});

Look this working fiddle

Datepicker stops working on reloads/paging

1 Answers1