Question

我正在使用此datetimepicker：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中添加一个新实例并在NEW html上初始化datepicker。

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

在动态内容上触发jQuery datetimepicker

1 个答案: