web-dev-qa-db-ja.com

jQueryは、イベントをAJAX .on（）を使用して読み込まれた要素にバインドできません）

.loadを使用して、次のコンテンツを＃step_2 divにロードしています。

<div id="step_2">
    Select a subcategory:
    <select id="subcategory_id" name="subcategory_id">
        <option value="0">All subcategories</option>
        <option value="68">Cool</option>
        <option value="15">Cooler</option>
        <option value="74">Excellent</option>
    </select>
</div>

次に、ユーザーが何かを選択したときにそれを検出しようとしています。

$("#subcategory_id").on("change", function(){
    alert( 'Success!' );
});

しかし、成功しませんでした。誰かが私が間違っていることを見ていますか？感謝して助けてください。

ノート：

FireBugから見た完全なCSSパスは次のとおりです。

html.js body div#container div#main form div#step_2 select#subcategory_id

コンテキストが重要な場合の完全なJavaScriptファイルは次のとおりです。

$(document).ready(function() {

    $("#category_id").change(function() {
        $("#spinner").show();
        $("#step_2").load("process.php?selected=category", { value: $(this).val() }, function() {
            // Do something to say the data has loaded sucessfully
            $("#spinner").hide();
        });
    });

    $("#subcategory_id").on("change", function(){
        alert( 'Success!' );
    });

});
eventsjquerybindingjavascript-events
24
CodeVirtuoso

この場合、onをdelegateと同様の方法で使用する必要があります。使用している構文はbindの代わりです。

$("#step_2").on("change", "#subcategory_id", function(){
    alert( 'Success!' );
});

最初のセレクターは、置き換えられない要素でなければなりません。このようにして、イベントがこの時点までバブルすると、キャッチされます。次に、イベントをトリガーする実際の要素を.onの2番目のパラメーターとして指定します。

37
Richard Dalton

on(...)は、適切な設定がなければ、まだページ上にないイベントをサブスクライブしません。あなたが望むことをするために、あなたは以下を試すべきです：

_$(document).on("change", "#subcategory_id", function(){
    alert( 'Success!' );
});
_

これをより効率的にするには、$(document)を、このコードが呼び出されたときにページ上にあることがわかっている要素の最も近い親に置き換える必要があります。

13
Dan Herbert

Htmlをロードした後、ハンドラーをバインドするか、

$("#step_2").on("change", "#subcategory_id", function(){
    alert( 'Success!' );
});
5
Tetaxa

確かに、

$(document).on("change", "#subcategory_id", function(){...});

.onを使用してイベントを委任するには、バインドする親要素を提供し、次に委任するセレクターを提供します。

5
Kevin B

新しい要素を読み込んだ後、イベントを設定する必要があります。 AJAXは非同期であるため、ロードにコールバックが必要です。

$(document).ready(function() {

    $("#category_id").change(function() {
        $("#spinner").show();
        $("#step_2").load("process.php?selected=category", { value: $(this).val() }, 
        function() {
        // Do something to say the data has loaded sucessfully
            $("#spinner").hide();

            $("#subcategory_id").on("change", function(){
                alert( 'Success!' );
            });

        });
    });

});
2
jValdron