Question

使用下面的示例，我有一个tr我正在复制。它包含一个jQuery autocomplete。第一次克隆时，自动完成功能不起作用，因为附加的data("items")为空。第二次单击“添加”按钮时，自动完成功能正常。此后，再次单击“添加”会生成无效的自动完成功能。

在makeAutoComplete函数内添加断点表明items始终为空，除非第二次单击添加时！

任何人都可以解释这种奇怪的行为吗？

HTML / JS （小提琴：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>

Answer 1

我必须修复多个问题才能让它发挥作用。

@pimvdb首先指出 - 我没有正确识别元素，因此第二个新行与模板行具有相同的ID。

其次，你不能简单地在已经是autocomplete的小部件上调用autocomplete - 首先你必须销毁它：

textbox.autocomplete("destroy");
textbox.removeData("autocomplete");

第12版可以正常运行：http://jsfiddle.net/SDvF4/12/

jQuery clone（）复制数据......有时......？

1 个答案: