动态形式的简单时间戳

Question

我想要实现的是这样的动态形式

＆＃34;自举/ JS / local.js＆＃34;

 $(document).ready(function(){

$("#add-entry").click(function(e){
    event.preventDefault();
    $("#items").append('<div>'
        +'<input type="text" id="timepicker">'
        +'<input type="button" value="delete-entry" id="delete-entry"></div>');
});

$('body').on('click','#delete-entry',function(e){

    $(this).parent('div').remove();
});


$("#timepicker").timepicker({ 'timeFormat': 'h:i A' });



});

HTML

<div class="form-group">
                <label>Time Schedule:</label>
                <div id="items">
                    <input type="text" id="timepicker">
                 </div>
                 <input type="button" value="add entry" id="add-entry">
            </div>

脚本文件。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/local.js"></script>

我无法移动一个，因为时间戳不起作用

Answer 1

由于时间戳输入是动态生成的，因此不能以这种方式向其追加事件侦听器/函数：

$("#timepicker").timepicker({ 'timeFormat': 'h:i A' });

您必须采用与#delete-entry元素相同的方式执行此操作：

$('body').on('click','#delete-entry',function(e){...}

这有点棘手，因为你想在元素上运行jQuery UI函数，而不是添加事件监听器。但是，它可以这样做：

$('body').on('focus',"#timepicker", function(){
    $(this).timepicker();
});​

希望这有帮助！

Answer 2

首先id =“delete-entry”是错误的。 id是单义的，使用class。

$(document).ready()

在页面加载结束时初始化 你需要初始化新的输入。

对于按钮，您可以使用

$('document').on('click','.delete-entry',function
     alert("click");
);