1

3 つ<select>のメニューがあり、それぞれに変更イベントが機能しています。コードの内訳は次のようになります。

$(document).ready(function(){
    // some code

    $("#selectOne").change(function() {
        // some code inc ajax request

        $("#selectTwo").change(function() {
            // some code inc a different ajax request
        });

        $("#selectThree").change(function() {
            // some code inc a yet another ajax request

        });
    });
});

上記の問題は、selectOne が正常に動作し、selectTwo も正常に動作しているように見えますが、selectThree を変更すると、selectTwo と selectThree の両方のコードが同時に起動することです。3 つの select のいずれかを選択する順序に応じて、selectThree.change の応答は、以前の各応答を表示および非表示にしてから、誤った応答を表示することに決めます。

私がやりたいことはこれです：

$(document).ready(function(){
    // some code

    $("#selectOne").change(function() {
        // some code inc ajax request
    });

    $("#selectTwo").change(function() {
        // some code inc a different ajax request
    });

    $("#selectThree").change(function() {
        // some code inc a yet another ajax request

    });
});

このシナリオでは、selectOne は正常に動作しますが、selectTwo と selectThree は変更に応答しません。

各要素が変更されると、正しい変更イベントのみが発生するように、これを修正する方法はありますか?

4

1 に答える 1

2

ドキュメントがロードされたときに、ID「selectTwo」または「selectThree」の選択要素がないようです。同様に、最初のケースでは、「selectOne」のイベントハンドラが実行されるときに「selectThree」はありません。そのため、対応するイベント ハンドラーが実行されません。この問題を処理するには 2 つの方法があります。

1 -要素の作成時にハンドラーを割り当てます。

2 -.on()の代わりに使用.change():

$('body').on("change", "#selectOne", function () {});

$('body').on("change", "#selectTwo", function () {});

$('body').on("change", "#selectThree", function () {});
于 2012-10-08T08:46:50.933 に答える