jQuery 日历和 ajax 按钮单击 - PHP jQuery BS-Calendar Ajax

Question

我有一个调用添加按钮的脚本，其中包含三个字段 - 名称（从 db 驱动的选择框）、百分比和日历。

脚本运行良好，但日历功能有问题。

日历在第一次单击按钮时不起作用（添加作者）。

第二行日历在第三行被触发时激活。它还在继续。

如果您检查我的小提琴代码，您就会明白。 http://jsfiddle.net/8PduS/5/

换句话说，当我第一次单击添加行按钮时，第二行日历不起作用。当我再次单击添加行按钮（即第三行）时，第二行与日历一起激活。

我哪里做错了。

部分代码：

    <script type="text/javascript">
    $(document).ready(function(){
    var i=1;
    $("#add_row").click(function(){

    $('#addr'+i).html("<td>"+ (i+1) +"</td>");
    var selectClone = $('select:first').clone(true);  
    $('#datepicker.input-daterange').datepicker({
    format: "yyyy-mm-dd",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true
    });

    $('#addr'+i).html("<td>"+ (i+1) +"</td><td><select name='name"+i+"' class='form-control input-md'>"+ selectClone.html() +"</select></td><td><input name='percent"+i+"' type='text' placeholder='Percent' class='form-control input-md'/></td><td><div class='input-daterange input-group' id='datepicker'><input required type='text' class='form-control' id='pa_start"+i+"' name='pa_start"+i+"' /></div></td>");
    $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
    i++; 
    });
    });
    </script>

谢谢， 金兹

Answer 1

当你向 DOM 追加一个新的日期选择器时，你必须初始化日期选择器：

Demo

$(document).ready(function () {
    initDatePicker();
    var counter = 1;
    $("#add_row").click(function () {
        new_elem = $("#addr_template").clone().appendTo("#container tbody").show().attr("id", "addr" + counter);
        counter += 1;
        initDatePicker();
    });

    function initDatePicker() {
        $('#datepicker.input-daterange').datepicker({
            format: "yyyy-mm-dd",
            todayBtn: "linked",
            autoclose: true,
            todayHighlight: true
        });
    }

});