我创建了一个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元素,但是我不能。我有以下代码:
<a href="javascript:;" class="light-button">Next</a> <select id="chapters-select"> <?php foreach ($chapters as $chapter) : ?> <option value="<?php echo $chapter->id; ?>"><?php echo $chapter->title; ?></option> <?php endforeach; ?> </select>
在这里,我动态生成选择选项。当我尝试这样做时:
$('#chapters-select').change(function(){ alert('changed'); });
它不起作用。通过ajax附加html后,如何使用javascript?
使用on1.7版以上的委托事件
on
$('body').on('change', '#chapters-select', function(){ alert('changed'); });
为了提高性能,body您应该编写最接近的static(未使用ajax或javascript添加动态)元素,该元素包含“chapters-select
body
chapters-select
如果您使用的是旧版本,请使用jQuery下表选择适当的方法:
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 docs:
提供选择器后,事件处理程序称为“委托”。当事件直接发生在绑定元素上时,不调用处理程序,而仅对与选择器匹配的后代(内部元素)进行调用。jQuery使事件从事件目标一直冒泡到附加了处理程序的元素(即,最内层元素到最外层元素),并沿该路径运行与选择器匹配的任何元素的处理程序。 事件处理程序仅绑定到当前选定的元素。在您的代码调用.on()时,它们必须存在于页面上。为确保元素存在并可以选择,请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。如果将新的HTML注入页面,请在将新的HTML放入页面后选择元素并附加事件处理程序。或者,使用委托事件来附加事件处理程序,如下所述。
提供选择器后,事件处理程序称为“委托”。当事件直接发生在绑定元素上时,不调用处理程序,而仅对与选择器匹配的后代(内部元素)进行调用。jQuery使事件从事件目标一直冒泡到附加了处理程序的元素(即,最内层元素到最外层元素),并沿该路径运行与选择器匹配的任何元素的处理程序。
事件处理程序仅绑定到当前选定的元素。在您的代码调用.on()时,它们必须存在于页面上。为确保元素存在并可以选择,请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。如果将新的HTML注入页面,请在将新的HTML放入页面后选择元素并附加事件处理程序。或者,使用委托事件来附加事件处理程序,如下所述。