0

背景故事：

在我正在做的这个项目中，当用户单击“+ 添加目标”按钮时，我有一段代码（几行表格）被复制。

用于选择时间的滚动条包含在代码块中，但由于新内容（更多目标输入）是动态添加/创建的，因此任何新滚动条都不起作用，因为它们看不到或拿起 javascript 代码（因为页面没有重新加载）。

问题：

我需要找到一种方法，以便在单击“+ 添加目的地”按钮并创建新的目的地输入时，用户可以单击时间输入并使用 mobiscroller 选择时间。

这是我的jsFiddle问题

这是我的mobiscroller所在的代码： <div class="form-spinner"><input type="text" id="scroller" class="input-text" name="scroller" placeholder="00:00"> </div>

这是脚本：

<script>
$(function(){
// create a timepicker with default settings
$("#scroller").mobiscroll().time({theme: 'android-ics light',
    display: 'modal', mode: 'scroller', showLabel:false, headerText:'Set an arrival time', button3:'clear', button3Text:'Clear' }); // Shorthand for: $("#scroller").mobiscroll({ preset: 'time' });
});
</script>

我知道我正在使用，id但是当我将其更改为类时，mobiscroller 脚本中的某些内容会id为滚动条创建一个，然后每个新的滚动条都相同id

4

1 回答 1

2

您需要调用.mobiscroll()新内容，因为它不是通过$(document).ready(调用调用的。

function createNewDestination() {
    count++;
    //Create new content
    var newContent = $('<div/>', {
        html: GetHtml()
    });      
    //Add event handlers to new content
    newContent.find(".spinner-item").click(spinnerItemClicked);
    newContent.mobiscroll().time({theme: 'android-ics light',
        display: 'modal', mode: 'scroller', showLabel:false, clearText:'clear', headerText:'Set an arrival time', button3:'clear', button3Text:'Clear' });
    return newContent;  
}

此外，您在getHTML. 您是#scroller从主文档中提取的，而不是$html. 改变：

$('#check').attr('id', 'check' + count + '');
$('#scroller').attr('id', 'scroller' + count + '');

至：

$html.find('#check').attr('id', 'check' + count + '');
$html.find('#scroller').attr('id', 'scroller' + count + '');

JSFiddle

于 2013-11-07T18:36:38.457 回答