0

製品ページを ajax でソートし、既存の DOM 要素を ajax によって新しく生成された DOM で上書きすると、JavaScript が機能しません。Zoom製品画像などの製品を並べ替えると、すべての効果がなくなります.onを使用してDOMをバインドする必要があるという別の記事を読みましたが、場合によっては.onが機能しません。以下にコードを示します

$(document).ready(function (){

            function callAjax (){

                if ($("#brandId").val() == "")
                {
                    var brandId;
                }
                else
                {
                    var brandId = $("#brandId").val();
                }
                if ($("#categoryId").val() == "")
                {
                    var categoryId;
                }
                else
                {
                    var categoryId = $("#categoryId").val();
                }
                if ($("#genderId").val() == "")
                {
                    var genderId;
                }
                else
                {
                    var genderId = $("#genderId").val();
                }
                if ($("#stockId").val() == "")
                {
                    var stockId;
                }
                else
                {
                    var stockId = $("#stockId").val();
                }

                $.ajax({
                    url: baseUrlForExternalJS.baseUrl + "site/sort_products",
                    type:"POST",
                    data: {'brandId':brandId, 'categoryId' : categoryId, 'genderId' : genderId , 'stockId' : stockId },
                    success: function(msg){
                        $('#products').html(msg);
                    }
                });
            }

            $("#categoryId").on('change', function(){
                //alert('called');
                callAjax();
            });
            $("#genderId").on('change', function(){
                //alert('called');
                callAjax();
            });
            $("#stockId").on('change', function(){
                //alert('called');
                callAjax();
            });

            $("#brandId").on('change', function(){
                callAjax();
            })

        });
 </script>
4

5 に答える 5

0

コードを次のように修正します。

 $('#products').on('change',"#categoryId", function(){
                //alert('called');
                callAjax();
            });

//like wise change for all remaining.

http://api.jquery.com/on/

于 2013-06-20T06:38:54.957 に答える
0

.on()の使用法はここで間違っています。

動的要素の場合、イベント伝播ベースのイベント ハンドラーが必要です。そのためには、別の構文を使用する必要があります。

お気に入り

$(document).on('<event>', '<selector>', handler)

元

        $(document).on('change', '"#stockId"', function(){
            //alert('called');
            callAjax();
        })
于 2013-06-20T06:39:31.160 に答える
0

私もこの問題を抱えていましたが、答えを見つけました。

上の方々のおっしゃる通りです。.on() 関数でうまくいきます。

jQueryのサイトはこちら

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。または、次に説明するように、委任されたイベントを使用してイベント ハンドラーをアタッチします。

つまり、ajax コード (コードがロードされたときにそこになかったイベント ハンドラー) を呼び出す場合は、そこにあった要素にバインドする必要があります。

次に例を示します。

$( "body" ).on( "click", "p", function() {
    alert( $( this ).text() );
});

上のリンクでも見れます。そこでは、それがどのように機能するかを示しています。

于 2014-07-23T20:44:59.863 に答える