выбор элементов dom после вставки html на страницу с помощью ajax

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. Теперь мне нужно выбрать элементы DOM из вставленного HTML, но я не могу. У меня есть следующий код:

<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');
});

это не работает. Как я могу использовать JavaScript после добавления HTML через AJAX?

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 переносит событие от цели события до элемента, к которому прикреплен обработчик (т. е. от самого внутреннего к крайнему элементу), и запускает обработчик для любых элементов на этом пути, соответствующих селектору.

Обработчики событий привязываются только к выбранным в данный момент элементам; Oни должен существовать на странице в тот момент, когда ваш код вызывает .on (). Чтобы убедиться, что элементы присутствуют и могут быть выбраны, выполните событие привязка внутри обработчика готовых документов для элементов, которые находятся в HTML-разметка на странице. Если новый HTML вводится на страницу, выберите элементы и прикрепите обработчики событий после того, как новый HTML размещены на странице. Или используйте делегированные события, чтобы прикрепить событие обработчик, как описано далее.

Answer 2

Запустите это один раз, после первой загрузки страницы.

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

Это эквивалентно ответу @ gdoron, но совместимо с версиями jQuery старше 1.7