jQuery无法使用.on()将事件绑定到AJAX加载的元素

Question

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

});

Answer 1

在这种情况下,您需要以on类似的方式使用delegate,您使用的语法是替代bind.

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

第一个选择器必须是不会被替换的元素.这样,当事件冒泡到此时就会被捕获.然后,您将指定将触发事件的实际元素作为第二个参数.on.

Answer 2

on(...)如果没有正确的设置,将不会订阅页面上没有的事件.要做你想做的事,你应该尝试以下方法:

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

为了提高效率,您应该$(document)在调用此代码时替换您知道将在页面上的元素的最近父元素.

Answer 3

您必须在加载html后绑定处理程序,或使用

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

Answer 4

当然可以,

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

要使用.on委派事件,请提供要绑定到的父元素,然后提供要委派的选择器.