在复制带有autocomplete事件的一行或一个文本框时,即使使用深克隆,新复制的文本框代码看起来和原来的一样,但无法触发autocomplete事件,网上找了些资料,写的都不是很清楚,最后自己通过翻看API解决,关键代码分享给大家,直接上代码:
$(function() {
addAutocomplete(); //页面加载完成时已存在行,注册autocomplete事件
// 添加行按钮
$("#addLineBtn").on('click', function() {
$("input[name='format_name']").autocomplete("destroy"); //最关键的一步,先销毁autocomplete事件,后面再重新注册事件
var $productFromat = $($(".productFromat").get(0)).clone(true);//克隆第一行,深克隆,行内其它输入框或按钮的事件也要克隆
$productFromat.appendTo("#productFromatTab"); // 追加到表格
addAutocomplete(); //重新注册事件
});
});
//自动补全功能
var dataCache = {};
// 注册autocomplete事件的方法
function addAutocomplete() {
// 给文本框注册autocomplete事件
$("input[name='format_name']").autocomplete({
minLength: 1,
delay: 500,
source: function(request, response) {
var term = request.term;
if (term in dataCache) {
response(dataCache[term]);
return;
}
// 查询后台数据,并缓存
$.getJSON("/ajaxQueryURL.do", request, function(data, status) {
dataCache[term] = data;
response(data);
});
}
});
}