jQuery无法使用.on()方法绑定事件到通过AJAX加载的元素上。

Question

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

但是没有成功。有人看出我做错了什么吗？非常感谢帮助。

备注：

以下是完整的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!' );
    });
    
});

- CodeVirtuoso

---

".on被用于jQuery 1.7以上版本，您的jQuery版本是什么？" - Cesar

Answer 1

在这种情况下，你需要使用on类似于delegate的方式，你正在使用的语法是用来替换bind的。

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

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

- Richard Dalton

---

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

Answer 2

on(...)方法如果没有正确设置，将无法订阅尚未在页面上出现的事件。要实现您想要的功能，请尝试以下方法：

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

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

- Dan Herbert

Answer 3

你需要在加载HTML后绑定处理程序，或者使用...

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

- Tetaxa

Answer 4

当然可以。

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

使用.on来委托事件，需要提供一个父级元素进行绑定，然后指定需要委托的选择器。

- Kevin B

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

        });
    });

});

- jValdron