在动态内容上触发 jQuery datetimepicker

Question

我正在使用这个日期时间选择器：https://github.com/xdan/datetimepicker

我有一个表单，用户可以在其中动态添加更多字段。我一直无法找到让 datetimepicker 显示在动态添加的字段上的方法。

这是一个 JS Bin：http://jsbin.com/coxafodace/1/edit?html,js,output

我尝试过使用 live() 和 onclick() 以及一大堆其他东西，但是 datetimepicker 总是出现在最后一个非动态表单字段上，而不是新创建的表单字段上。

那么我该怎么做才能在动态字段上触发 datatimepicker？

Answer 1

这是因为您正在克隆最后一个重复的项目，所以它具有相同的事件，相同的一切。一个更好的方法是制作一个模板：

<script type="text/template" id="date-time-template">
    //repeated html goes in here
</script>

然后在您的 javascript 中添加一个新实例并在新的 html 上初始化日期选择器。

var repeatingTemplate = $('#date-time-template').html();

jQuery('.repeat').click(function(e){  
    e.preventDefault();

    //Creates a NEW jquery object of the same html
    var $repeating = $(repeatingTemplate);
    var lastRepeatingGroup = jQuery('.repeating').last();

    //places the new line after the last one
    lastRepeatingGroup.after($repeating);

    //binds the datetime events to the newly added line
    $repeating.find('.starttime').datetimepicker({
        datepicker:false,
        // mask: true,
        format:'H:i',
        step: 15,
    });

    $repeating.find('.endtime').datetimepicker({
        datepicker:false,
        // mask: true,
        format:'H:i',
        step: 15,
    });
});

Here is an updated jsbin