0

サイトにオートコンプリート プラグインを使用しました。それは私にとってはうまくいきました。しかし今、Ajax を同時に使用したため、AJax を使用して新しい HTML を追加しているときに、スクリプトが失敗しました。私はstackoverflowに投稿し.on、Jquery 1.7.2の使用に関する回答を得たので、コードをバインドしようとしました.on

私のコードは

$(document).ready(function(){
    $(function(){
        $(document).on("click.autocomplete","#artist_id",function(e){
            $(this).autocomplete({
                source : '<?php echo HTTP_PATH . '/artists/getArtistList'; ?>',
                multiple: true,
                mustMatch: true,
                matchContains: true,
                scroll: true,
                minChars: 0,
                autoFill: true,
                dataType: "json",
                parse: function(data) {
                    return $.map(data, function(item) {
                        return { data: item, value: item.label, result: item.label};
                    });
                },
                formatItem: function(item) {
                    return item.label;
                },
                formatResult: function(item) {
                    return item.id;
                },
                formatMatch: function(item) {
                    return item.label;
                }
            });
        });
    });
 });

うまく動いていたコード...

    $("#artist_id").focus().autocomplete( '<?php //echo HTTP_PATH . '/artists/getArtistList'; ?>', {
        multiple: true,
        mustMatch: true,
        matchContains: true,
        scroll: true,
        minChars: 0,
        autoFill: true,
        dataType: "json",
        parse: function(data) {
            return $.map(data, function(item) {
                return { data: item, value: item.label, result: item.label};
            });
        },
        formatItem: function(item) {
            return item.label;
        },
        formatResult: function(item) {
            return item.id;
        },
        formatMatch: function(item) {
            return item.label;
        }
    });

問題は、応答を送信することでも、スクリプトでエラーが発生することでもありません。Firebugで確認してみました。

4

2 に答える 2

0

いくつかのこと:

これは冗長です

$(document).ready(function(){
    $(function(){...

どちらか一方のみを使用してください。

$(document).ready(function(){...

次に、名前空間click.autocompleteを持つ任意のクリック イベントにバインドします。autocompleteあなたがするつもりだったと思うのは、クラスを持つテキスト入力にイベントをバインドすることですautocomplete

$(document).on("click",".autocomplete",function(e){
    // prevent the default action
    e.preventDefault();
    // initialize autocomplete
    $(this).autocomplete({
        ...
    })
    // remove class to prevent reinitializing autocomplete:
    .removeClass('autocomplete')
    // trigger the focus event to start the autocomplete
    .focus();
});

$(document).readydocumentはすでに準備ができているので、ここでは必要ありません。

于 2012-06-29T19:02:39.760 に答える
0

あなたの問題はこの行です:

$(document).on("click.autocomplete","#artist_id",function(e){

以前はフォーカスに「バインド」していましたが、現在は「click.autocomplete」にバインドしています。これを次のように変更します。

$(document).on("focus","#artist_id",function(e){

.on()のjQuery ドキュメントによると、2 番目のパラメーターは、セレクターではなく、バインドするイベントです。

于 2012-06-29T18:21:01.940 に答える