jQuery clone（）复制数据......有时......？ [英] jQuery clone() copies data...sometimes...?
问题描述
使用下面的示例，我有一个 tr 我正在复制。它包含一个jQuery 自动完成。第一次克隆时，自动完成功能不起作用，因为附加的数据（items）为空。第二次单击添加按钮时，自动完成功能正常。此后，再次单击添加会生成无效的自动完成。
在 makeAutoComplete 函数内添加断点那个 items 总是为null，除非第二次点击Add时添加！
任何人都可以解释这种奇怪的行为吗？ / p>
HTML / JS （小提琴： http://jsfiddle.net/SDvF4/12/ ）
<！DOCTYPE html>
< html lang =enxmlns =http://www.w3.org/1999/xhtml>
< head>
< meta charset =utf-8/>
< title>测试！< / title>
< style type =text / css>
tr.Template
{
display：none;
}
< / style>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-1.7.1.min.js>< / script>
< script type =text / javascriptsrc =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））;
}）;
}）;
}）;
函数makeAutoComplete（文本框）
{
var items = textbox.data（items）;
var test = textbox.data（test）;
if（items == null）
{
if（test ==JSM）
alert（错误：data.items未复制但数据。测试是！）;
else
alert（错误：data.items未复制，也不是data.test！）;
}
textbox.autocomplete（
{
minLength：0，
source：items
}）;
}
< / script>
< / head>
< body>
< table>
< tbody>
< tr class =Template>
< td>
< input id =test_0name =test_0class =AutoCompletetype =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>添加< / button>
< / body>
< / html>
我必须解决多个问题才能解决这个问题工作。
@pimvdb首先指出 - 我没有正确识别元素，所以第二个新行与模板行具有相同的ID。
其次，你不能简单地在已经 autocomplete <的小部件上调用 autocomplete / code> - 首先你必须销毁它：
textbox.autocomplete（destroy）;
textbox.removeData（autocomplete）;
第12版本正常运行： http://jsfiddle.net/SDvF4/12/
Using the sample below, I have a tr that I am duplicating. It contains a jQuery autocomplete. The first time it is cloned, the auto complete functionality does not work because the attached data("items") is null. The second time the Add button is clicked, the autocomplete works. Thereafter, clicking Add once again produces a non-functioning autocomplete.
Adding a breakpoint inside of the makeAutoComplete function shows that items is always null except for when clicking Add the second time!
Can anyone explain this strange behavior?
HTML/JS (Fiddle here: 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>
There were multiple issues I had to fix to get this to work.
First was pointed out by @pimvdb - I wasn't IDing the elements correctly so the second new row had the same ID as the template row.
Second, you can't simply call autocomplete on a widget that is already an autocomplete - first you have to destroy it:
textbox.autocomplete("destroy");
textbox.removeData("autocomplete");
The 12th revision works correctly: http://jsfiddle.net/SDvF4/12/
这篇关于jQuery clone（）复制数据......有时......？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
