javascript - 动态添加/创建的 Mobiscroller 不起作用

Question

背景故事:

在我正在做的这个项目中，我有一个代码块(一些表单行)，当用户单击“+添加目的地”按钮时，该代码块会被复制。

用于选择时间的滚动器包含在代码块中，但由于新内容(更多目标输入)是动态添加/创建的，因此任何新滚动器都无法工作，因为它们看不到或拾取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

Answer 1

您需要对新内容调用 .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