我创建了一个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?
最佳答案
对于1.7+版本,使用on
之类的委托(delegate)事件
$('body').on('change', '#chapters-select', function(){
alert('changed');
});
为了提高性能而不是
body
,您应该编写包含“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
docs:关于javascript - 在将HTML插入带有Ajax的页面中后选择dom元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/9466241/