部分代码：

Question

我有一个会调用添加按钮的脚本，有三个字段 - 名称（从数据库驱动的选择框），百分比和日历。

脚本运行正常，但我的日历功能有问题。

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

触发第三行时，第二行日历将处于活动状态。它继续。

如果您查看我的小提琴代码，您就会明白。 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>

谢谢， Kimz

Answer 1

当你向DOM添加一个新的时，你必须初始化datepicker：

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

});

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

部分代码：

1 个答案: