将HTML插入带有Ajax的页面后，选择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

使用on1.7版以上的委托事件

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

为了提高性能，body您应该编写最接近的static（未使用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 docs：

提供选择器后，事件处理程序称为“委托”。当事件直接发生在绑定元素上时，不调用处理程序，而仅对与选择器匹配的后代（内部元素）进行调用。jQuery使事件从事件目标一直冒泡到附加了处理程序的元素（即，最内层元素到最外层元素），并沿该路径运行与选择器匹配的任何元素的处理程序。

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