[英]Jquery - Add and remove fields dynamically - How to do it without repeating code?
I am implementing a "JQuery add/remove input fields" solution: I need to use some JQuery plugins to make everything work. 我正在实现“ JQuery添加/删除输入字段”解决方案:我需要使用一些JQuery插件才能使一切正常工作。 For example I use a Datepicker, SelectPicker and Autosize.. So, for the markup that's already there (without the ADD functionality) this code works:
例如,我使用Datepicker,SelectPicker和Autosize。。因此,对于已经存在的标记(不具有ADD功能),此代码有效:
$(document).ready(function() {
$('.autosize').autosize();
$('input, textarea').placeholder();
$('.datetimepickaa').datetimepicker({
pickTime: false
});
$('.selectpicker').selectpicker();
// Remove the specific row
$("button.removee").click(function(){
$(this).closest(".conteiner").remove();
});
});
The problem is that when I try to add the ADD functionality, the jquery plugins don't work for the new elements, so I have to repeat the calls inside the add code to make it work: 问题是,当我尝试添加ADD功能时,jQuery插件不适用于新元素,因此我必须在添加代码内重复调用以使其起作用:
$(document).ready(function() {
$('.autosize').autosize();
$('input, textarea').placeholder();
$('.datetimepickaa').datetimepicker({
pickTime: false
});
$('.selectpicker').selectpicker();
// Remove the specific row
$("button.removee").click(function(){
$(this).closest(".conteiner").remove();
});
// ADD FUNCTIONALITY
$("#add").click(function() {
var row = '\
<div class="form-group conteiner">\
<div class="row">\
<div class="col-md-2">\
<label for="date">Date:</label>\
<div class="input-group date datetimepickaa" id="datetimepickerloop" data-date-format="YYYY/MM/DD">\
<input type="text" class="form-control datetimepickaa" placeholder="Enter the date..." data-date-format="YYYY/MM/DD" />\
<span class="input-group-addon">\
<span class="glyphicon glyphicon-calendar"></span>\
</span>\
</div>\
</div>\
<div class="col-md-9">\
<label for="notes">Notes:</label>\
<textarea class="form-control autosize" id="" name=""></textarea>\
</div>\
<div style="" class="col-md-1">\
<button type="button" class="removee btn btn-primary btn-md pull-right" style="margin-top:25px">\
<span class="glyphicon glyphicon-remove"></span> Delete\
</button>\
</div>\
</div>\
</div>';
$("#wrapper").append(row);
// REPETITION OF THE CODE ABOVE!!!!!! //////////////////////////////
$('.autosize').autosize();
$('input, textarea').placeholder();
$('.datetimepickaa').datetimepicker({
pickTime: false
});
$('.selectpicker').selectpicker();
// Remove the specific row
$("button.removee").click(function(){
$(this).closest(".conteiner").remove();
});
});
});
Do you have any clue on how to do that the best way without repeting any code? 您是否有最佳方法而不重复任何代码的任何线索?
Thank's in advance!! 提前致谢!!
Extract them into a function and call that function? 将它们提取到一个函数中并调用该函数?
function initializeThings()
{
$('.autosize').autosize();
$('input, textarea').placeholder();
$('.datetimepickaa').datetimepicker({
pickTime: false
});
$('.selectpicker').selectpicker();
// Remove the specific row
$("button.removee").click(function(){
$(this).closest(".conteiner").remove();
});
}
$(document).ready(function() {
initializeThings();
// ADD FUNCTIONALITY
$("#add").click(function() {
var row = '\
<div class="form-group conteiner">\
<div class="row">\
<div class="col-md-2">\
<label for="date">Date:</label>\
<div class="input-group date datetimepickaa" id="datetimepickerloop" data-date-format="YYYY/MM/DD">\
<input type="text" class="form-control datetimepickaa" placeholder="Enter the date..." data-date-format="YYYY/MM/DD" />\
<span class="input-group-addon">\
<span class="glyphicon glyphicon-calendar"></span>\
</span>\
</div>\
</div>\
<div class="col-md-9">\
<label for="notes">Notes:</label>\
<textarea class="form-control autosize" id="" name=""></textarea>\
</div>\
<div style="" class="col-md-1">\
<button type="button" class="removee btn btn-primary btn-md pull-right" style="margin-top:25px">\
<span class="glyphicon glyphicon-remove"></span> Delete\
</button>\
</div>\
</div>\
</div>';
$("#wrapper").append(row);
initializeThings();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.