我正在克隆一个具有自动完成类的表上的输入字段。当我克隆字段时,我没有问题。问题是,在克隆的字段中,自动完成不起作用(在未克隆的字段上,它起作用)。我的自动完成代码是这样的:
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#input' + num).clone().prop('id', 'input' + newNum);
newElem.find(':input').each(function() {
var name = $(this).attr('name').replace(/'d+$/, '');
$(this).prop({id: name + newNum, name: name + newNum}).val("");
});
// insert the new element after the last "duplicatable" input field
$('#input' + num).after(newElem);
// enable the "remove" button
$('#btnDel').prop('disabled','');
// business rule: you can only add 15 names
if (newNum == 15)
$('#btnAdd').prop('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
$('#input' + num).remove(); // remove the last element
// enable the "add" button
$('#btnAdd').prop('disabled','');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDel').prop('disabled','disabled');
});
$('#btnDel').prop('disabled','disabled');
});
我的自动完成代码是:
var autoc = {
source: "lib/search.php",
minLength: 1,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
};
var renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a style='height:75px; text-align:center; font-weight:bold;'>"+ item.label + "</a>" )
.appendTo( ul );
};
$(".member").each(function (i) {
$(this).autocomplete(autoc).data("autocomplete")._renderItem = renderItem;
});
我一直试图通过将自动完成代码放在克隆代码中来修复它,我不确定我做错了什么。如果有人能帮忙就太好了!谢谢
在自动完成字段被克隆后,您必须重新初始化它。我认为把它包装在.live()
中也是必要的
我的解决方案是这样的:
$('#my_clone_button').live('click',function() {
my_clone_script; #this is my function to clone
$('select your new cloned input').each(function() {
$(this).autocomplete('destroy');
enable_autocomplete($(this), json_url); #this is my function to initialize autocomplete
});
});
尝试传递true的$('#input' + num).clone(true)
,这会告诉克隆也要复制事件和数据。这意味着它将复制输入是一个自动完成字段。