Javascript jQuery自动完成不在克隆上工作
目前正在处理jQuery自动完成和克隆。在单击“添加更多”按钮之前的一开始,原始字段工作正常,但当我单击“添加更多”按钮时,克隆该行时“自动完成”不起作用 这是我的HTML代码Javascript jQuery自动完成不在克隆上工作,javascript,jquery,html,autocomplete,jquery-autocomplete,Javascript,Jquery,Html,Autocomplete,Jquery Autocomplete,目前正在处理jQuery自动完成和克隆。在单击“添加更多”按钮之前的一开始,原始字段工作正常,但当我单击“添加更多”按钮时,克隆该行时“自动完成”不起作用 这是我的HTML代码 <div class="cloned-row1"> <input type="text" id="txt_schName_1" class="ipt_Field required_Field txt_schName "/> <input type="button" class
<div class="cloned-row1">
<input type="text" id="txt_schName_1" class="ipt_Field required_Field txt_schName "/>
<input type="button" class="btn_more edubtnmore btn_right edu_add_button" />
</div>
平均文本字段-小数点后加零
$(".ipt_Havg").focusout(function(event) {
var nondecimalRegex = /^\d{1,6}$/,
inputtxt = event.target.value,
decimalRegex = /^\d{1,6}\.\d{3}$/;
if (inputtxt.length > 0) {
var resultVal;
if (/^\d{1,6}$/.test(inputtxt)) {
resultVal = inputtxt + ".000";
} else if (/^\d{1,6}\.\d{1,3}$/.test(inputtxt)) {
// count of zeros to add to the end of input val
var c = 3 - inputtxt.split("\.")[1].length;
resultVal = inputtxt + (c == 1 ? "0" : (c == 2 ? "00" : ""));
} else {
alert("The field can have a maximum of 6 digits before the decimal symbol, and 3 digits after the decimal symbol");
}
this.value = typeof resultVal == "undefined" ? "" : resultVal;
}
});
当我搜索的时候,我发现了一个解决方案,就是在那个链接中,他们要求把autocomplete放在一个函数中,并在克隆后调用这个函数,我做了同样的操作,但我仍然没有得到答案,我想如果我错了,autocomplete是正确的uuid概念
这是你的电话号码
使用我当前的代码,我可以进行克隆和首次自动完成功能
提前感谢您的建议,请在此更改:
- 首先,避免使用深度克隆,使用autocomplete时,il将复制绑定到autocomplete元素的事件,并且它将不起作用;因此,请使用
clone()
- 您正在触发自动完成的类/id错误(例如缺少选择器类型或错误的名称),我试图修复它们
- 在第一个点之后,第二个“自动完成”上的选择将更新第一行。我已将
功能更改为用于克隆select
演示:感谢您的帮助。请解释我为什么要删除深度克隆。如果我删除深度克隆,我还有一个问题。我有一个高中平均水平的功能,但现在不起作用。请帮助我该做什么。我已经用该代码更新了我的问题,也请执行以下操作needfulHi@Irvin多米尼,我想增加注意力当我试图增加一些数字时,我把注意力集中在了高中平均水平领域之外。函数正在调用,但结果没有更改$clone.find(“.ipt_Havg”).focusout(函数(){adddecimal();});嗨@Mahadevan很抱歉耽搁了我今天会查你的评论你能过来聊几分钟吗我还有一个问题
$(document).ready(function() {
autoComplete($('#txt_schName_1'));
});
function autoComplete(t) {
t.tableAutocomplete({
highlightClass: "bold",
source: function(request, response) {
var regex = new RegExp(request.term, 'i');
//var filteredArray = filteredArray.slice(0,10);
$.ajax({
url: "json/dummy.json",
dataType: "json",
data: {
term: request.term
},
success: function(data) {
response($.map(data, function(item) {
// This code is only for testing. It should be done on the server!
if (regex.test(item.id) || regex.test(item.label)) {
return item
}
}));
},
});
},
columns: [{
field: 'id',
title: 'Search School Name'
}, {
field: 'label',
title: 'School Name'
}],
delay: 500,
select: function (event, ui) {
if (ui.item != undefined) {
$(this).val(ui.item.value);
$('#school_Name').val(ui.item.label);
console.log(ui.item.label);
if (ui.item.label === "Other"){
var schoolObj = $(".school_Name");
schoolObj.prop('disabled', false);
schoolObj.val('');
}
}
}
});
}
$(".ipt_Havg").focusout(function(event) {
var nondecimalRegex = /^\d{1,6}$/,
inputtxt = event.target.value,
decimalRegex = /^\d{1,6}\.\d{3}$/;
if (inputtxt.length > 0) {
var resultVal;
if (/^\d{1,6}$/.test(inputtxt)) {
resultVal = inputtxt + ".000";
} else if (/^\d{1,6}\.\d{1,3}$/.test(inputtxt)) {
// count of zeros to add to the end of input val
var c = 3 - inputtxt.split("\.")[1].length;
resultVal = inputtxt + (c == 1 ? "0" : (c == 2 ? "00" : ""));
} else {
alert("The field can have a maximum of 6 digits before the decimal symbol, and 3 digits after the decimal symbol");
}
this.value = typeof resultVal == "undefined" ? "" : resultVal;
}
});
<div class="input-group">
<input type="text" id="txt_schName" class="ipt_Field txt_schName" />
<p class="form-control-feedback"><i class="fa fa-search custom-mar"></i></p>
</div>
$(document).on("click", ".edu_add_button", function() {
var $clone = $('.cloned-row1:eq(0)').clone();
var num = $('.cloned-row1').length;
$clone.find('[id]').each(function() {
this.id += '_' + num;
$(this).removeClass("errRed");
if ($(this).hasClass("required_Field")) {
$(this).prevAll('label').find('span.required-star').removeClass('text-error-red');
$(this).addClass("cloned_field");
//$(this).addClass("errRed");
} else {
$(this).removeClass("errRed");
$(this).removeClass("text-error-red");
}
});
$clone.find('.btn_more').after("<input type='button' value='Delete' class='btn_less1 edu_btnle' id='buttonless'/>");
$clone.attr('id', "cloned-row" + (++count));
$clone.find(".school_Name").attr('disabled', true).val('');
$clone.find(".txt_schName").val('').attr('id', 'txt_schName_' + count);
$clone.find(".degree_Description").attr('disabled', true).val('');
$clone.find(".ipt_Havg").val('');
$clone.find(".trans_date").val('');
var dateobj = new Date();
var datemonth;
if (dateobj.getMonth() + 1 < 10) datemonth = "0";
datemonth += dateobj.getMonth() + 1;
var fulldate = datemonth + "-" + dateobj.getDate() + "-" + dateobj.getFullYear();
$clone.find("input.deg_date")
.removeClass('hasDatepicker')
.removeData('datepicker')
.unbind()
.datepicker({
dateFormat: "mm/dd/yy",
changeMonth: true,
yearRange: "-100:+0",
changeYear: true,
maxDate: new Date(),
showButtonPanel: false,
});
$('.cloned_field').addClass("errRed");
var dateobj = new Date();
var datemonth;
if (dateobj.getMonth() + 1 < 10) datemonth = "0";
datemonth += dateobj.getMonth() + 1;
var fulldate = datemonth + "-" + dateobj.getDate() + "-" + dateobj.getFullYear();
$clone.find("input.trans_date")
.removeClass('hasDatepicker')
.removeData('datepicker')
.unbind()
.datepicker({
dateFormat: "mm/dd/yy",
changeMonth: true,
yearRange: "-100:+0",
changeYear: true,
maxDate: new Date(),
showButtonPanel: false,
});
$(this).parents('.educat_info').after($clone);
autoComplete($clone.find(".txt_schName"));
});
select: function(event, ui) {
if (ui.item != undefined) {
$(this).val(ui.item.value);
$(this).closest('.row').find('.school_Name').val(ui.item.label);
console.log(ui.item.label);
if (ui.item.label === "Other") {
var schoolObj = $(".school_Name");
schoolObj.prop('disabled', false);
schoolObj.val('');
}
}
}