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

Question

我创建了一个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？

Answer 1

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

$('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放入页面后选择元素并附加事件处理程序.或者,使用委托事件来附加事件处理程序,如下所述.