在使用ajax的页面中插入html后选择dom元素

我创建了一个ajax选项卡导航,其中html被插入到页面中。 代码看起来像这样:

$.ajax({ type: 'POST', url: 'main/ajaxjson/load_course_details', data: {page : which, course_id: id}, success: function(home){ $('#ajax-content ').hide(); $('#ajax-content').empty().append(home); $('#ajax-content').fadeIn(); } }); 

好的…所以我将我的标记附加到我的HTML中。 现在我需要从插入的html中选择dom元素,但我不能。 我有以下代码:

 Next   <option value="id; ?>">title; ?>   

在这里,我动态生成选择选项。 当我尝试这样做时:

 $('#chapters-select').change(function(){ alert('changed'); }); 

它不起作用。 我通过ajax追加html后如何使用javascript?

对于版本1.7+使用委托事件,例如on

 $('body').on('change', '#chapters-select', function(){ alert('changed'); }); 

要提高性能而不是body您应该编写最接近的静态(未添加动态与ajax或javascript)元素,其中包含“ chapters-select

如果您使用的是旧版本的jQuery ,请使用下表选择适当的方法:

 $(selector).live(events, data, handler); // jQuery 1.3+ $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ $(document).on(events, selector, data, handler); // jQuery 1.7+ 

on 文档上:

提供选择器时,事件处理程序称为委托。 当事件直接发生在绑定元素上时,不会调用处理程序,但仅适用于与选择器匹配的后代(内部元素)。 jQuery将事件从事件目标起泡到附加处理程序的元素(即最里面到最外层的元素),并为匹配选择器的路径上的任何元素运行处理程序。

事件处理程序仅绑定到当前选定的元素; 它们必须存在于您的代码调用.on()时页面上。 要确保元素存在且可以选择,请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。 如果将新HTML注入页面,请在将新HTML放入页面后选择元素并附加事件处理程序。 或者,使用委托事件来附加事件处理程序,如下所述。

在页面首次加载后运行一次。

 $("body").delegate('#chapters-select','change', function(){ alert('changed'); }); 

它等同于@ gdoron的答案,但与早于1.7的jQuery版本兼容