0

私は次のコードを持っています(いくつかの選択で遊んでいます)。

最初の変更機能の後、2 番目の変更機能は機能しません。

        jQuery('.toPopSelect').change(function(){
            console.log("hey");
        });

最初の変更関数が一部の html を置き換え、その後 jQuery が .toPopSelect クラスを選択できないためだと思います。

なぜこれが起こっているのですか？それを回避する方法はありますか？

    <select class="theSelect">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>

    <div class="toPopulate">
        <select class="toPopSelect">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </div>




jQuery(document).ready(function(){

        jQuery('.theSelect').change(function(){
            jQtoPopulate = jQuery('.toPopulate');
            jQtoPopulate.empty();
            jQtoPopSelect = jQuery('.toPopSelect');
            v = jQuery(this).val();

            if ( v == 1) {
                console.log("ues")
                jQtoPopulate.html('<input type="text" size="60"><\/input>');
            } else {
                jQtoPopulate.html('<select class="toPopSelect"><option value="1">1<\/option><option value="2">2<\/option><option value="3">3<\/option><option value="4">4<\/option><option value="5">5<\/option><\/select>');

                jQtoPopSelect.append('<option value="6">6<\/option>');
            }

        });

        jQuery('.toPopSelect').change(function(){
            console.log("hey");
        });

    });

何か案は？

4

4 に答える 4

2

後でコードを追加するため、このようなリスナーを使用する必要があります。

それを説明するための jsFiddle : http://jsfiddle.net/s6MVQ/

$(document).on('change', '.toPopSelect', function(){
    alert("ok");
});

詳細情報: http://api.jquery.com/on/

于 2013-09-26T15:36:03.567 に答える
1

イベント委任を適切に行う必要があります。.toPopSelectは動的に作成されるため、次の方法でイベントを処理する必要があります。jquery .on() ドキュメント

$(document).on('change', '.toPopSelect', function(){
    console.log("hey");
});

document静的な外部コンテナのクラス/IDに置き換えることができれば、(パフォーマンスのために)さらに良い

于 2013-09-26T15:34:38.223 に答える
0

これを試して：

jQuery(document).ready(function(){

        jQuery('.theSelect').change(function(){
            jQtoPopulate = jQuery('.toPopulate');
            jQtoPopulate.empty();
            jQtoPopSelect = jQuery('.toPopSelect');
            v = jQuery(this).val();

            if ( v == 1) {
                console.log("ues")
                jQtoPopulate.html('<input type="text" size="60"><\/input>');
            } else {
                jQtoPopulate.html('<select class="toPopSelect"><option value="1">1<\/option><option value="2">2<\/option><option value="3">3<\/option><option value="4">4<\/option><option value="5">5<\/option><\/select>');

                jQtoPopSelect.append('<option value="6">6<\/option>');
            }

        });

        var c = $(document);
        c.delegate(".toPopSelect","change",function(){ alert("hey"); });

    });
于 2013-09-26T15:34:59.747 に答える