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

使用.load，我将以下内容加载到＃step_2 div中：

 Select a subcategory:  All subcategories Cool Cooler Excellent   

我正在尝试检测用户何时选择某些内容：

 $("#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)替换$(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!' ); }); }); }); });