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委派事件，请提供要绑定的父元素，然后选择要委派的选项。

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

        });
    });

});

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

5 个答案: