2

使用下面的示例，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>
4

1 回答 1

1

我必须解决多个问题才能使其正常工作。

首先是@pimvdb 指出的——我没有正确识别元​​素，所以第二个新行的 ID 与模板行相同。

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

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

第 12 次修订工作正常：http: //jsfiddle.net/SDvF4/12/

于 2012-12-13T20:48:45.957 回答