jQuery无法使用.on（）将事件绑定到AJAX加载的元素[重复]答案

【问题标题】：jQuery can't bind event to AJAX loaded element using .on() [duplicate]jQuery无法使用.on（）将事件绑定到AJAX加载的元素[重复]
【发布时间】：2012-01-10 18:06:02
【问题描述】：

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

【问题讨论】：

.on 用于 jQuery 1.7+，你的 jQuery 版本是多少？

标签： jquery events jquery-events

【解决方案1】：

在这种情况下，您需要以与delegate 类似的方式使用on，您使用的语法是bind 的替换。

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

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

【讨论】：

有几个相同的正确答案，但我选择这个是因为最好的解释。感谢@Richard D，以及其他所有人。

【解决方案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!' );
            });

        });
    });

});

【讨论】：