12

動的に作成された入力 (再び jQuery で作成) で jQuery オートコンプリートを使用すると問題が発生します。新しい入力にバインドするオートコンプリートを取得できません。

オートコンプリート

      $("#description").autocomplete({
         source: function(request, response) {
            $.ajax({
                url: "../../works_search",
                dataType: "json",
                type: "post",
                data: {
                    maxRows: 15,
                    term: request.term
                },
                success: function(data) {
                    response($.map(data.works, function(item) {
                        return {
                                label: item.description,
                                value: item.description
                        }
                    }))
                }
            })
        },
        minLength: 2,
    });


入力を含む新しいテーブル行

var i = 1;
var $table = $("#works");
var $tableBody = $("tbody",$table);

$('a#add').click(function() {
    var newtr = $('<tr class="jobs"><td><input type="text" name="item[' + i + '][quantity]" /></td><td><input type="text" id="description" name="item[' + i + '][works_description]" /></td></tr>');
    $tableBody.append(newtr); 
    i++;
});

この問題は、ページが読み込まれた後に作成されるコンテンツが原因であることは認識していますが、それを回避する方法がわかりません。関連するいくつかの質問を読み、jQuery ライブ メソッドに出くわしましたが、まだ渋滞しています。

何かアドバイス？

4

2 に答える 2

24

.autocomplete()まず、次のようなオプションを保存します。

var autocomp_opt={
         source: function(request, response) {
            $.ajax({
                url: "../../works_search",
                dataType: "json",
                type: "post",
                data: {
                    maxRows: 15,
                    term: request.term
                },
                success: function(data) {
                    response($.map(data.works, function(item) {
                        return {
                                label: item.description,
                                value: item.description
                        }
                    }))
                }
            })
        },
        minLength: 2,
    };

次のように、classをマークするために属性を使用する方が適切です。input

<input type="text" class="description" name="item[' + i + '][works_description]" />

最後に、新しい表の行を作成するときに、 に.autocomplete()すでに保存されているオプションを適用しautocomp_optます。

$('a#add').click(function() {
    var newtr = $('<tr class="jobs"><td><input type="text" name="item[' + i + '][quantity]" /></td><td><input type="text" class="description" name="item[' + i + '][works_description]" /></td></tr>');
    $('.description', newtr).autocomplete(autocomp_opt);
    $tableBody.append(newtr); 
    i++;
});
于 2010-04-18T19:28:17.733 に答える
0

追加の後にオートコンプリートを配置する必要があることがわかりました。

 $tableBody.append(newtr);  
 $('.description', newtr).autocomplete(autocomp_opt);
于 2013-06-17T15:32:24.830 に答える