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!' );
});

но без успеха. Кто-нибудь видит, что я делаю неправильно? Помогите с благодарностью.

ПРИМЕЧАНИЯ:

Здесь полный CSS-путь, как показано FireBug:

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!' );
    });

});

Ответ 1

В этом случае вам нужно использовать on аналогично delegate, используемый вами синтаксис является заменой для bind.

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

Первый селектор должен быть элементом, который не будет заменен. Таким образом, когда событие пузырится до этого момента, оно захватывается. Затем вы указываете фактический элемент, который инициирует событие как второй параметр .on.

Ответ 2

on(...) не будет подписаться на события, которые еще не находятся на странице, без правильной настройки. Чтобы сделать то, что вы хотите, вы должны попробовать следующее:

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

Чтобы сделать это более эффективным, вы должны заменить $(document) ближайшим родителем элемента, который, как вы знаете, будет на странице при вызове этого кода.

Ответ 3

Вам нужно привязать обработчик после загрузки html или использовать

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

Ответ 4

Конечно, может,

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

Чтобы делегировать события, используя .on, предоставить родительский элемент для привязки, а затем селектор для делегирования.

Ответ 5

Вы должны установить событие после того, как вы загрузили новый элемент. Поскольку 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!' );
            });

        });
    });

});