2013-07-18 108 views
0

我有一个jQuery TimePicker。它工作正常,但是当我克隆该行时,它只能在第一行上工作,而不在克隆行上。克隆的Jquery timePicker

这是代码:

<script> 
    $(function() { 
     $('#timePicker').timepicker({ 'timeFormat': 'H:i' }); 
    }); 
</script>  

<input id="timePicker" name = "time[]" type="text" class="time" /> 

我认为这是使用id来调用该函数。任何其他更好的方法?

+2

请检查此链接。 。我做了一个演示http://jsfiddle.net/9a6xY/ – rab

回答

2

当你克隆该行时,还初始化第二个时间选择器。

这可能会产生一个问题,尽管你现在使用的代码是因为你的DOM中会有一个重复的ID。因此,我建议你改变idclass,当你复制的行调用这个:

$('.timePicker').timepicker({ 'timeFormat': 'H:i' }); 

或者只是删除您输入栏的ID,并使用此:

$('.time').timepicker({ 'timeFormat': 'H:i' }); 
+0

其工作在前2行:/ –

+0

请更新您的问题,以便我们可以看到你在做什么 – MaVRoSCy

0

这是因为...当timepicker被调用..克隆的元素不存在于文档中,因此将无法找到并添加timepicker到它..克隆的元素附加到后,再次调用timepicker该文件。

试试这个

<script> 
    $(function() { 
    $('.time').timepicker({ 'timeFormat': 'H:i' }); 
    //-^---here using class selector 

    //your codes to append the cloned element. 

    $('.time').timepicker({ 'timeFormat': 'H:i' }); //call again 
    //-^---here using class selector 
}); 
</script> 

注:请确保您使用类怎么一回事,因为复制元素将结束与具有相同的id,这将是无效的两个元素..所以我用类这里

+0

我已经试过这样做:

+0

您的选择器必须是'.time',像这样:$('。time')。timepicker({'timeFormat':'H:i'}); – MaVRoSCy

+0

在我的答案中注意'''运算符而不是'#' ..这是类选择器...但在你的情况下,即使你有类..你正在使用ID选择器..删除该ID ...或否则使其独特 – bipen