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

在这种情况下，您需要以与delegate类似的方式使用on，您使用的语法是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 委托事件，请提供要绑定的父元素，然后提供要委托的选择器。

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

        });
    });

});