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

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 8 年前。

使用.load ，我将以下内容加载到 #step_2 中分区:

<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 的第二个参数。