1

jQueryを使用してhtmlを動的に追加しており、このコンテンツでオートコンプリートを使用しています。ただし、動的に追加されたコンテンツではオートコンプリートが機能しません。私と同様の質問をたくさん見てきましたが、それらの解決策はうまくいかないようです。私が持っているjQueryコードは次のとおりです。

$(document).ready(function() {
    if ( $("#add-sister-centers").length > 0 ){

        $(".autocomp_centers").autocomplete({ 
            serviceUrl:'/suggest_centers',
                maxHeight:400,
                width:252,
                minChars:2,
                onSelect: function(value, data){ $("input[name='center_ids[]']").val(data); }
        });

        $("#add-another-button").click( function(){
            var sister_center_input = "<div class=\"field\" style=\"margin-top:10px;\"><span class=\"purple-text\" style=\"font-weight:bold; margin-right:20px;\">Center name*</span><input type=\"text\" name=\"center_names[]\" class=\"autocomp_centers\"/></div>"
            sister_center_input.autocomplete();
            $("#additional-sister-centers").append(sister_center_input);
        });
    }
});

私は何を間違っていますか？bind、live、または on を使用する必要がありますか?

4

2 に答える 2

1

まず、オートコンプリート プラグインをテキスト ボックスにのみ適用できます。次に、オートコンプリートを適用しようとする前に、新しく作成したテキストボックスがレンダリングされていません。また、 sister_center_input はDOMを含まない単なる文字列変数であるため、文字列にオートコンプリートを適用できません。以下のコードを試してください

var sister_center_input = $("<div class=\"field\" style=\"margin-top:10px;\"><span class=\"purple-text\" style=\"font-weight:bold; margin-right:20px;\">Center name*</span><input type=\"text\" name=\"center_names[]\" class=\"autocomp_centers\"/></div>");
$("#additional-sister-centers").append(sister_center_input);
$("#additional-sister-centers").find(".autocomp_centers").autocomplete();
于 2013-01-07T16:57:31.530 に答える
1

問題は、 variable:sister_center_inputが単なる文字列変数であるにもかかわらずautocomplete、そこから jQuery メソッドを使用しようとしていることです。それは決してうまくいきません。

上記の定義で定義したオートコンプリート関数にも同じプロパティを渡す必要があります。

コードの 2 番目の部分を次のように変更して試してください。

    $("#add-another-button").click( function(){
        var sister_center_input = "<div class=\"field\" style=\"margin-top:10px;\"><span class=\"purple-text\" style=\"font-weight:bold; margin-right:20px;\">Center name*</span><input type=\"text\" name=\"center_names[]\" class=\"autocomp_centers\"/></div>"
        $("#additional-sister-centers").append(sister_center_input);
        $('.autocomp_centers').autocomplete({ 
            serviceUrl:'/suggest_centers',
            maxHeight:400,
            width:252,
            minChars:2,
            onSelect: function(value, data){ $("input[name='center_ids[]']").val(data);}
        });
    });
于 2013-01-07T16:58:10.757 に答える