[英]How to add and remove time or date picker materialize?
我遇到一個問題,我想創建多個時間字段,但是單擊添加按鈕就像添加動態輸入字段一樣。 但是,當我在動態創建的輸入字段上觸發時間時,它將不起作用。 請幫助我附上以下代碼片段以供參考。
<div class="row slot-container">
<div class="input-field col s12">
<input type="text" placeholder="select date for demo" class="datepicker">
</div>
<div class="input-field col s6">
<input type="text" placeholder="from" class="timepicker">
</div>
<div class="input-field col s6">
<input type="text" placeholder="to" class="timepicker">
</div>
</div>
<a class="waves-effect waves-light btn addSlots">Add Slots</a>
$(function(){
$('.timepicker').pickatime({
default: 'now', // Set default time: 'now', '1:30AM', '16:30'
fromnow: 0,
twelvehour: true, // Use AM/PM or 24-hour format
donetext: 'OK', // text for done-button
cleartext: 'Clear', // text for clear-button
canceltext: 'Cancel', // Text for cancel-button,
container: 'body', // ex. 'body' will append picker to body
autoclose: false, // automatic close timepicker
ampmclickable: true, // make AM PM clickable
aftershow: function(){} //Function for after opening timepicker
});
$(document).on('click','.addSlots',function(){
$('.slot-container').after("<div class='row slot-container'><div class='input-field col s6'> <input type='text' placeholder='from' class='timepicker'> </div> <div class='input-field col s6'> <input type='text' placeholder='to' class='timepicker'> </div> </div>");
});
});
只是更改第一行。 之前:
$(function(){
后:
$(document).on('focus','.timepicker',function(){
請試試
$(function(){
$(document).off('click','.addSlots').on('click','.addSlots',function(){
$('.slot-container').after("<div class='row slot-container'><div class='input-field col s6'> <input type='text' placeholder='from' class='timepicker'> </div> <div class='input-field col s6'> <input type='text' placeholder='to' class='timepicker'> </div> </div>");
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.