Question

背景故事：

在这个项目中我正在做一个代码块（一些表单行），当用户点击“+ add destination”按钮时，它会重复。

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

问题：

我需要找到一种方法来制作它，以便在点击“+ add destination”按钮并创建新的目标输入时，用户可以点击时间输入并选择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，然后每个新滚动条都会获得相同的{{1} }

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

动态添加/创建的Mobiscroller无法正常运行

1 个答案: