jQuery不能使用.on() [duplicate]将事件绑定到AJAX加载的元素

This question already has an answer here:

这个问题已经有了答案:

Event binding on dynamically created elements? 23 answers
动态创建的元素上的事件绑定?23日答案

Using .load, I'm loading the following content into #step_2 div:

使用.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>

I'm then trying to detect when user selects something:

然后我试着检测用户选择什么:

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

but with no success. Does anyone see what I'm doing wrong? Help greatly appreciated.

但是没有成功。有人知道我做错了什么吗?帮助深表感谢。

NOTES:

注:

Here's the full CSS path as seen by FireBug:

以下是FireBug看到的完整CSS路径:

html.js body div#container div#main form div#step_2 select#subcategory_id

Here's the full javascript file, if context matters:

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

});

5 个解决方案

#1

In this case you need to use on in a similar way to delegate, the syntax you are using is the replacement for bind.

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

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

The first selector has to be an element that won't be replaced. This way, when the event bubbles up to this point it is caught. You then specify the actual element that will trigger the event as the 2nd parameter of .on.

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

#2

on(...) won't subscribe to events that aren't on the page yet without the proper setup. To do what you want, you should try the following:

没有适当的设置，on(…)不会订阅页面上没有的事件。做你想做的事，你应该试试以下方法:

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

To make this more efficient, you should replace $(document) with the closest parent of the element that you know will be on the page when this code is called.

为了提高效率，您应该用最近的元素父元素替换$(document)，这些元素在调用该代码时将位于页面上。

#3

You have to bind the handler after you've loaded the html, or use

您必须在加载html或使用html之后绑定处理程序

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

#4

Sure it can,

当然可以,

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

To delegate events using .on, provide a parent element to bind to, and then the selector to delegate to.

要使用.on委托事件，请提供要绑定到的父元素，然后提供要委托给的选择器。

#5

You have to set the event after that you have loaded the new element. As AJAX is asynchronous, you need to have a callback in your load.

您必须在加载新元素之后设置事件。由于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!' );
            });

        });
    });

});

#1