我创建了HTML的AJAX标签导航插入到页面中。在code是这样的：

I created an ajax tab navigation with html being inserted into the page. the code looks like this:

$.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元素，但我不能。我有以下的code：

ok...so I append my markup into my html. Now I need to select dom elements from the inserted html, but I can not. I have the following code:

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

下面我动态生成的选择选项。当我尝试这样做：

Here I generate the select options dynamically. When I try to do this:

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

这是行不通的。 我如何使用JavaScript后，我通过AJAX追加HTML？

it doesn't work. How can I use javascript after I append the html via ajax ?

推荐答案

使用委托的事件，例如在为版本1.7 +

Use delegate event like on for version 1.7+

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

要提高性能，而不是体你应该写最接近的静态（不添加动态的，AJAX或JavaScript）元素保存章节选

To increase performance instead of body you should write the closest static(Not added dynamic with ajax or javascript) element that holds "chapters-select

如果您使用的是的jQuery 的旧版本选择适当的方法与下表：

If you are using older version of jQuery choose the appropriate method with the following table:

$(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的气泡从该事件的事件目标达到处理程序附后（即最内层到最外层的元素），并运行处理程序沿该路径选择器匹配的任何元素的元素。

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

事件处理程序只能绑定到当前选定的元素;他们   必须存在于网页上的时候你的code使得调用。对（）。   为了保证元件是present并且可以选择，执行事件   文档准备好处理程序内绑定为那些中的元素   页面上的HTML标记。如果新的HTML被注入到该页面，   选择元素和附加的事件处理程序后，新的HTML是   放入页面。或者，使用委派事件附加一个事件   处理程序，如下所述。

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.