Выбор элементов dom после того, как html был вставлен на страницу с ajax

Я создал навигационную панель ajax с вставкой html на страницу. код выглядит так:Выбор элементов dom после того, как html был вставлен на страницу с ajax

$.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(); 
     } 

    });

ok ... поэтому я добавляю свою разметку в свой 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?

источник

2012-02-27 Mythriel

Кажется, работает хорошо для меня: http://jsfiddle.net/fyg6m/ Где вы связывании событие обработчик? –

@FelixKling. Он написал, что добавляет контент с помощью 'ajax', поэтому это должно быть проблема с событием делегата. – gdoron

@gdoron: Возможно, но это означало бы, что элементы выбраны * перед *, они были вставлены через Ajax, что противоречит названию. Тем не менее, я согласен с вами. –

Использования делегат событие, как 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+

ondocs:

Когда предусмотрен селектор, обработчик события называют делегированы. Обработчик не вызывается, когда событие происходит непосредственно на связанном элементе, но только для потомков (внутренних элементов), соответствующих селектору. jQuery создает пузырьки события от целевого объекта до элемента, в который прикреплен обработчик (т. е. самый внутренний к внешнему элементу), и запускает обработчик для любых элементов вдоль этого пути, соответствующего селектору.

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

источник

2012-02-27 14:03:12 gdoron

Или просто переустановите обработчик событий в обратном вызове для '$ .ajax'. – Treffynnon

спасибо. это работает. Я не понимаю, почему он не работал раньше, но я буду исследовать его – Mythriel

@Treffynnon. Обычно лучше всего делать что-то один раз и только в одном месте. – gdoron

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

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

Это эквивалентно @ gdoron Ответим, но совместим с версиями JQuery старше 1,7

источник

2012-02-27 14:04:40 wheresrhys

Выбор элементов dom после того, как html был вставлен на страницу с ajax

ответ

Смежные вопросы