1

2 つのフィールドを追加するこのコードがあり、入力にオートコンプリート機能を持たせたいと考えています。

$("#addElem").click(function () {

                var new_id = new Date().getTime();

                var content = '<div id="fields"><input type="hidden" name="softwarePerAsset.Index" value="' + new_id + '" />' +
                '<select name="softwarePerAsset[' + new_id +
                '].name" id="softwarePerAsset[' + new_id +
                '].name"> <option value="1">Visio</option><option value="2">Painter</option></select>&nbsp;&nbsp;&nbsp;' +
                '<input type="text" name="softwarePerAsset[' + new_id + '].serial" id="softwarePerAsset[' + new_id +
                '].serial">&nbsp;&nbsp;&nbsp;<a id="test" href="#">Remove Software</a></div>';

                $("#elem").append(content);

            });

これを追加しようとしましたが、何も機能しません:

var data = "notepad firefox chrome".split(" ");
content.find('input[type=text]').autocomplete(data);

私は何が欠けていますか？

更新 #1 - 完全なページ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" >

<head><title>

    Index

</title></head>

<body>

  <form action="/element/edit" method="post">

        <div id="elem">

            <!-- If there are software installed, then s -->

            <div class="fields">

                <input type="hidden" name="softwarePerAsset.Index" value="1" />

                <select name="softwarePerAsset[1].name" id="softwarePerAsset[1].name">

                    <option value="1">Visio</option>

                    <option value="2">Painter</option>

                </select>&nbsp;&nbsp;

                <input type="text" name="softwarePerAsset[1].serial" id="softwarePerAsset[1].serial" />&nbsp;&nbsp;

                <a class="test" href="#">Remove Software</a>

            </div>

            <div class="fields">

                <input type="hidden" name="softwarePerAsset.Index" value="2" />

                <select name="softwarePerAsset[2].name" id="softwarePerAsset[2].name">

                    <option value="1">Visio</option>

                    <option value="2">Painter</option>

                </select>&nbsp;&nbsp;

                <input type="text" name="softwarePerAsset[2].serial" id="softwarePerAsset[2].serial" />&nbsp;&nbsp;

                <a class="test" href="#">Remove Software</a>

            </div>



            </div><a href="#" id="addElem">Add Element</a>

        <br />

        <br />



        <input type="submit" name="btnSubmit" value="Submit" />

    </form>



    <script src="/jquery-1.9.1.js" type="text/javascript"></script>

    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>



    <script type="text/javascript">

        $(function () {



            //add element to elem div

            $("#addElem").click(function () {



                var new_id = new Date().getTime();



                var content = '<div class="fields"><input type="hidden" name="softwarePerAsset.Index" value="' + new_id + '" />' +

                '<select name="softwarePerAsset[' + new_id +

                '].name" id="softwarePerAsset[' + new_id +

                '].name"> <option value="1">Visio</option><option value="2">Painter</option></select>&nbsp;&nbsp;&nbsp;' +

                '<input type="text" name="softwarePerAsset[' + new_id + '].serial" id="softwarePerAsset[' + new_id +

                '].serial">&nbsp;&nbsp;&nbsp;<a id="test" href="#">Remove Software</a></div>';



                $("#elem").append(content);



                var data = "notepad firefox chrome".split(" ");

                $(content).find('input[type=text]').autocomplete(data);



            });



            //remove fields

            $("#elem").on("click", ".test", function () {

                $(this).closest("div.fields").remove();

            });

        });

    </script>

</body>

</html>
4

2 に答える 2

0

contenthtml を含む単なる文字列です。あなたはそれをjqueryオブジェクトにする必要があります$(content)

$(content).find('input[type=text]').autocomplete(data);
于 2013-05-14T16:00:26.043 に答える
0

私はこのように解決しました：

入力フィールドを参照するクラスを追加しました:

<input class="serial" type="text" name="softwarePerAsset[1368553379670].serial" id="softwarePerAsset[1368553379670].serial">

データ ソースは次のように定義されています。

var options = {
        source: ["notepad", "firefox", "chrome"]
    };

次に、autocompleteイベントをトリガーします

 $("#elem").on("keydown.autocomplete", "input.serial", function () {
        $(this).autocomplete(options);
    });
于 2013-05-14T17:46:37.513 に答える