2

以下のサンプルを使用して、tr複製しているものがあります。jQueryが含まれていますautocomplete。初めてクローンを作成するときは、アタッチされているdata("items")ものがnullであるため、オートコンプリート機能は機能しません。2回目に[追加]ボタンをクリックすると、オートコンプリートが機能します。その後、もう一度[追加]をクリックすると、機能しないオートコンプリートが生成されます。

関数内にブレークポイントを追加すると、2回目に[追加]をクリックした場合を除いて、常にnullmakeAutoCompleteであることが示されます。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していなかったので、2番目の新しい行はテンプレート行と同じIDを持っていました。

autocomplete第二に、すでにあるウィジェットを単純に呼び出すことはできませんautocomplete-最初にそれを破棄する必要があります：

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

12番目のリビジョンは正しく機能します：http：//jsfiddle.net/SDvF4/12/

于 2012-12-13T20:48:45.957 に答える