Bootstrap时钟选择器动态输入 [英] Bootstrap clock picker dynamic input
问题描述
参考下面的bootstrap代码我试图实现时钟选择器的动态输入,这里我使用了wrapper.append()来实现clockpicker文本框和其他2个文本框,只需单击一个按钮(添加)。
In reference to the below bootstrap code i am trying to implement a dynamic input for clock picker, here i have used a wrapper.append() to implement the clockpicker textbox and other 2 text box upon a click of a button (add).
<div style="height:70px;"></div>
<div class="container-fluid" >
<form role="form" name="frm" class="col-xs-12" action ="timeslot" method="post"
onSubmit="return valid2()">
<div class="form-group">
<label for="name" >Slot Name</label>
<input type="text" name="slotname" class="form-control col-xs-6" placeholder="Time Slot name" >
</div>
<div style="height:30px;"></div>
<div class="form-group row">
<div class="col-xs-6">
<label for="name" >Time Slot</label>
<input type="text" name="timeslot1" class="form-control col-xs-6" placeholder="Time Slot name" >
</div>
<div class="col-xs-6">
<label for="name">Slot Available</label>
<input type="text" name="slotavailable1" class="form-control" placeholder="Slot available" >
</div>
</div>
<label for="name" >Time</label>
<div class=" form-group row">
<div class="form-group clockpicker col-xs-6" data-placement="left" data-align="top" data-autoclose="true" >
<input type="text" id="start_time1" name="start_time1" class="form-control" value="09:30">
<span class="form-group-addon">
<span class="glyphicon glyphicon-time "></span>
</span>
</div>
<div class="form-group clockpicker col-xs-6" data-placement="left" data-align="top" data-autoclose="true" >
<input type="text" id="end_time1" name="end_time1" class="form-control" value="09:30">
<span class="form-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<div class="input_fields_wrap form-group">
<button class="add_field_button btn btn-info">Add</button>
</div>
<div style="height:30px;"></div>
<div class="form-group">
<button type="submit" id="submit" class="btn btn-info" onkeyup="count(this.value)" name="submit">SUBMIT</button>
</div>
</div>
</form>
<script type="text/javascript">
jQuery(function($) {
$('.clockpicker').clockpicker({
placement: 'top',
align: 'left',
donetext: 'Done'
});
// The line below "closes" the document ready function
});
</script>
<script>
$(document).ready(function() {
var max_fields = 15; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 2; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div> <div style="height:30px;"></div>'+
'<div class="form-group row">'+
'<div class="col-xs-6">'+
'<label for="name"+x >Time Slot</label>'+
'<input type="text" name="timeslot"+x class="form-control col-xs-6" placeholder="Time Slot name" ></div>'+
'<div class="col-xs-6">'+
'<label for="name"+x>Slot Available</label>'+
'<input type="text" name="slotavailable"+x class="form-control" placeholder="Slot available" >'+
'</div>'+
'</div>'+
'<label for="name"+x >Time</label>'+
'<div class=" form-group row">'+
'<div class="form-group clockpicker col-xs-6" data-placement="left" data-align="top" data-autoclose="true" >'+
'<input type="text" id="start_time"+x name="start_time"+x class="form-control" value="09:30">'+
'<span class="form-group-addon">'+
'<span class="glyphicon glyphicon-time "></span>'+
'</span>'+
'</div>'+
'<div class="form-group clockpicker col-xs-6" data-placement="left" data-align="top" data-autoclose="true" >'+
'<input type="text" id="end_time"+x name="end_time"+x class="form-control" value="09:30">'+
'<span class="form-group-addon">'+
'<span class="glyphicon glyphicon-time"></span>'+
'</span>'+
'</div>'+
'</div>'+
'<a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
ps:对于冗长的代码感到抱歉。
感谢@cale_b帮助我完成上一篇文章。
ps: sorry about the lengthy code. thanks to @cale_b for helping me with my previous post .
推荐答案
我要包括的不仅仅是原始问题,只是为了帮助 - 因为有些事情会让你前进的生活更轻松。
I'm going to include MORE than the original question, just to help - since there's some things that will make life easier for you moving forward.
提示你不需要要有单独的< script>
块,也不需要单独的文档就绪函数。
tip: You don't need to have separate <script>
blocks, nor do you need to have separate document ready functions.
解决方案:为了让你的clockpicker能够处理动态添加的元素,你需要在动态添加它们之后 bind
。
solution: In order for your clockpicker to work on dynamically added elements, you need to bind
them after they are added dynamically.
最有条理的方法是创建一个绑定你的clockpicker元素的函数,然后在需要时调用该函数:
The most organized way to do this is to create a function that binds your clockpicker elements, and then call that function when needed:
// Script tags do not need type="text/javascript", so I've removed
<script>
jQuery(function($) {
// The original "clockpicker" code is moved to the bottom in a function
// No need to close and re-open script tags, so I've removed those
// No need for a new "document ready" function, so I've removed that
var max_fields = 15; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 2; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if(x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div> <div style="height:30px;"></div>'+
'<div class="form-group row">'+
'<div class="col-xs-6">'+
'<label for="name"+x >Time Slot</label>'+
'<input type="text" name="timeslot"+x class="form-control col-xs-6" placeholder="Time Slot name" ></div>'+
'<div class="col-xs-6">'+
'<label for="name"+x>Slot Available</label>'+
'<input type="text" name="slotavailable"+x class="form-control" placeholder="Slot available" >'+
'</div>'+
'</div>'+
'<label for="name"+x >Time</label>'+
'<div class=" form-group row">'+
'<div class="form-group clockpicker col-xs-6" data-placement="left" data-align="top" data-autoclose="true" >'+
'<input type="text" id="start_time"+x name="start_time"+x class="form-control" value="09:30">'+
'<span class="form-group-addon">'+
'<span class="glyphicon glyphicon-time "></span>'+
'</span>'+
'</div>'+
'<div class="form-group clockpicker col-xs-6" data-placement="left" data-align="top" data-autoclose="true" >'+
'<input type="text" id="end_time"+x name="end_time"+x class="form-control" value="09:30">'+
'<span class="form-group-addon">'+
'<span class="glyphicon glyphicon-time"></span>'+
'</span>'+
'</div>'+
'</div>'+
'<a href="#" class="remove_field">Remove</a></div>'); //add input box
// NEW: Bind to the newly added clockpicker element
bindClockPicker();
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove();
x--;
});
// This function "binds" the clockpicker
function bindClockPicker() {
$('.clockpicker').clockpicker({
placement: 'top',
align: 'left',
donetext: 'Done'
});
}
// Last but not least, call this to bind to any existing clockpicker elements
bindClockPicker();
});
</script>
这篇关于Bootstrap时钟选择器动态输入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!