背景故事:
在我正在做的这个项目中,我有一个代码块(一些表单行),当用户单击“+添加目的地”按钮时,该代码块会被复制。
用于选择时间的滚动器包含在代码块中,但由于新内容(更多目标输入)是动态添加/创建的,因此任何新滚动器都无法工作,因为它们看不到或拾取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
最佳答案
您需要对新内容调用 .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 + '');
关于javascript - 动态添加/创建的 Mobiscroller 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19818183/