javascript - 点击和克隆时间选择器无法工作

下面是我用于克隆时间选择器的代码。


我试图在单击时删除hasDatepicker类，并尝试再次调用timepicker，但它不起作用。下面是我的代码

$(document).ready(function() {
    var clone_index = 0;
    console.log(max_value);
    $("#add_period_break").click(function() {
        $(".start_time").removeClass('hasDatepicker');
        $('.start_time').timepicker({});
        clone_index = clone_index + 1;
        //$("#countform").val(clone_index);
        console.log("add" + clone_index);
        $(this).parent().before($("#clone").clone().attr("id", "clone" + clone_index));

        $("#clone" + clone_index).css("display", "inline");
        $("#clone" + clone_index + " :input").each(function() {
            $(this).attr("name", $(this).attr("name") + clone_index);
            $(this).attr("id", $(this).attr("id") + clone_index);
            $("#countform").val(clone_index);
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div  id='clone'>
    <div class="form-group">
    <label for="exampleInputEmail1">Start Time</label>
    <input type="text" name="start_time" id="start_time" class="form-control start_time" readonly="readonly"  value="" placeholder="Start Time">
    </div>
    </div>

    <div id="box-footer">
    <button type="button"  class="btn btn-success" name="add_period_break"  id="add_period_break"><i class="glyphicon glyphicon-plus"></i> Add Periods/ Breaks</button>
    <button type="submit" class="btn btn-primary"> Submit</button>
    </div>

最佳答案

您要使用jQuery timepicker
您不需要删除hasDatepicker类，因为它永远不会分配给它。
此外，还有一个未分配的变量max_value。所以请删除它。


请检查以下代码：

$(document).ready(function () {
    var clone_index = 0;

    $('.start_time').timepicker({});//For first time on page load

    $("#add_period_break").click(function () {
        clone_index = clone_index + 1;
        $(this).parent().before($("#clone").clone().attr("id", "clone" + clone_index));

        $("#clone" + clone_index).css("display", "inline");
        $("#clone" + clone_index + " :input").each(function () {
            $(this).attr("name", $(this).attr("name") + clone_index);
            $(this).attr("id", $(this).attr("id") + clone_index);
            $("#countform").val(clone_index);
        });
        $('.start_time').timepicker({});///to apply timepicker on newly added textbox
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.js"></script>

<div id='clone'>
    <div class="form-group">
        <label for="exampleInputEmail1">Start Time</label>
        <input type="text" name="start_time" id="start_time" class="form-control start_time" readonly="readonly" value="" placeholder="Start Time">
    </div>
</div>

<div id="box-footer">
    <button type="button" class="btn btn-success" name="add_period_break" id="add_period_break"><i class="glyphicon glyphicon-plus"></i> Add Periods/ Breaks</button>
    <button type="submit" class="btn btn-primary"> Submit</button>
</div>