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

Question

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

• 我尝试删除点击时的 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>

Answer 1

• 您想使用 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>