Javascript 在使用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元素，但我不能。我有以下代码：

<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>

它不起作用。

---

在通过ajax附加html后，如何使用javascript？

在1.7版中使用类似于

的委托事件+

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

要提高性能而不是
正文
，您应该编写包含“
章节选择

如果您使用的是较旧版本的
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+  

开启

当提供选择器时，事件处理程序被称为委派。当事件直接发生在绑定元素上时，不会调用该处理程序，但仅针对与选择器匹配的子体（内部元素）。jQuery将事件从事件目标冒泡到附加处理程序的元素（即，从最内层到最外层的元素）并为与选择器匹配的路径上的任何元素运行处理程序

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

在页面第一次加载后，运行此命令一次

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

它相当于@gdoron的答案，但与早于1.7的jQuery版本兼容，或者只是在回调中重新绑定事件处理程序以获得
$.ajax
。谢谢。它正在工作。我不明白为什么它以前不工作，但我会研究it@Treffynnon.通常，最好只在一个地方做一次事情@Mythriel。阅读我添加和引用的文档，它应该能回答你所有的问题和想法。对我来说似乎很好：你在哪里绑定事件处理程序？@FelixKling。他写道他正在使用
ajax
添加内容，所以这一定是一个委托事件问题。@gdoron：可能，但这意味着在或者它们是通过Ajax插入的，这与标题相反。不过，我同意你的看法。你为什么要打开和关闭PHP引擎？
$("body").delegate('#chapters-select','change', function(){
    alert('changed');
});