使用下面的示例，我有一个tr我正在复制。它包含一个 jQueryautocomplete。第一次克隆时，自动完成功能不起作用，因为附加的data("items")一片空白。第二次单击“添加”按钮时，自动完成功能将起作用。此后，再次单击“添加”会导致自动完成功能不起作用。
在里面添加断点makeAutoComplete函数表明items始终为空，除非第二次单击“添加”！
谁能解释这种奇怪的行为？
HTML/JS（在这里小提琴：http://jsfiddle.net/SDvF4/12/ http://jsfiddle.net/SDvF4/12/)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Test!</title>
<style type="text/css">
tr.Template
{
display: none;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
var textbox = $(".AutoComplete");
makeAutoComplete(textbox);
$("#addButton").click(function ()
{
var attrRegex = /\d+/;
var template = $("tr.Template");
var newRow = template.clone(false);
var newRowIndex = (template.siblings().length + 1);
newRow.removeClass("Template");
newRow.find("*[id]").each(function ()
{
var element = $(this);
element.attr("id", element.attr("id").replace(attrRegex, newRowIndex));
});
newRow.find("*[name]").each(function ()
{
var element = $(this);
element.attr("name", element.attr("name").replace(attrRegex, newRowIndex));
});
newRow.insertBefore(template);
newRow.find(".AutoComplete").each(function ()
{
makeAutoComplete($(this));
});
});
});
function makeAutoComplete(textbox)
{
var items = textbox.data("items");
var test = textbox.data("test");
if (items == null)
{
if (test == "JSM")
alert("ERROR: data.items not copied but data.test was!");
else
alert("ERROR: data.items not copied nor was data.test!");
}
textbox.autocomplete(
{
minLength: 0,
source: items
});
}
</script>
</head>
<body>
<table>
<tbody>
<tr class="Template">
<td>
<input id="test_0" name="test_0" class="AutoComplete" type="text"/>
<script type="text/javascript">
var testData = [{ label: "One", value: 1 }, { label: "Two", value: 2 }];
$("#test_0").data("items", testData);
$("#test_0").data("test", "JSM");
</script>
</td>
</tr>
</tbody>
</table>
<br/><br/>
<button id="addButton">Add</button>
</body>
</html>
为了让它发挥作用，我必须解决多个问题。
首先是 @pimvdb 指出的 - 我没有正确识别元素，因此第二个新行具有与模板行相同的 ID。
其次，你不能简单地调用autocomplete在已经是的小部件上autocomplete- 首先你必须摧毁它：
textbox.autocomplete("destroy");
textbox.removeData("autocomplete");
第12次修订版工作正常：http://jsfiddle.net/SDvF4/12/ http://jsfiddle.net/SDvF4/12/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
