Dynamically created datepicker not working from created second row

Question

Dynamically created date picker not working from created second row:

$(document).ready(function () {
    $(".add_button").click(function () {
        var currentRow = $(this).parents("tr");
        var nr = currentRow.clone(true, true);
        nr.find(".name").val('');
        currentRow.after(nr);
    });
    $(".del_button").click(function () {
        var currentRow = $(this).parents("tr");
        if ($(".test tr").length != 2)
        {
            $(this).closest('tr').remove();
        }
        else
        {
            alert("You cannot delete first row");
        }
    });
});


<script>
    $(function () {
        $("#datepicker").datepicker({autoclose: true});
    });
</script>

The `datepicker` will not be automatically bind with the dynamically created element. You have to bind it after you create the element. — tejashsoni111, Oct 22 '16 at 12:52
why are you using a id, use a class , so it can not conflict for multiple row — chirag satapara, Oct 22 '16 at 13:46

score 0 · Answer 1 · answered Oct 22 '16 at 14:09

The datepicker will not be automatically bind with the dynamically created element. You have to bind it after you create the element with unique id and bind date picker.

Try this:

$(document).ready(function () {
    var current_id = 1;
    $(".add_button").click(function () {
        var currentRow = $(this).parents("tr");
        var nr = currentRow.clone(true, true);
        nr.find(".name").val('');
        nr.find(".name").attr('id','name_'+current_id);
        currentRow.after(nr);
        $("#name_"+current_id).datepicker({autoclose: true});

    });
});

Dynamically created datepicker not working from created second row

1 Answers1