Слушатель событий в элементах, добавленных после загрузки содержимого DOM

Мне нужно прослушать событие «изменения» <select>, но это отлично работает только при первом выборе, есть кнопка, которая добавляет больше <select> к document, поэтому мне нужно проверить если <select> меняется, я делаю что-то вроде этого:Слушатель событий в элементах, добавленных после загрузки содержимого DOM

document.addEventListener('DOMContentLoaded', function() { 
    var selects = document.getElementsByClassName('select'); 
    for(var i=0;i < selects.length;i++) { 
     selects[0].addEventListener('change', function() { 
      // do something here... 
     }, false); 
    } 
}, flase);

, но это выполняется только тогда, когда DOMContentLoaded и если я исполню ее пределами document.addEventListener это не выполняется.

P.S. Я делаю это с чистой причиной JS, то же самое с jQuery, и я больше контролирую свой скрипт с помощью чистого JS.

источник

2013-05-12 Memolition

Чтобы получить элементы 'select', вы должны использовать' document.getElementsByTagName', NOT 'document.getElementsByClassName'. – AndrewF

Я использовал только 'selects' с классом' select', но спасибо – Memolition

Присоединение событий непосредственно к узлам DOM является точным, учитывая, что эти узлы уже существуют в DOM.

Но, как требует ваше дело, есть лучший подход, который позволяет привязывать обработчики для данных событий к текущим узлам и узлам, добавленным в будущем.

Вы можете использовать событие bubbling: события, связанные с узлом, запускаются для самого узла и всех его родителей. Здесь я использовать элемент тела в качестве родительского узла, но вы можете установить слушатель на любом элементе дано это родитель текущие и будущие отборные элементы:

document.body.addEventListener("change", function(e) { 
    console.log(e.target); 
}

Заканчивать этот пример, чтобы получить лучшее представление: http://jsfiddle.net/6HqqA/.

Вот хорошее объяснение концепции пузырькового события: http://davidwalsh.name/event-delegate.

источник

2013-05-12 21:38:09 sixFingers

Обратите внимание, что document.body доступен только после того, как Window активировал событие «load». Хорошая вещь - разместить логику внутри блока window.onload или до. – sixFingers

Не закрепляйте их таким образом, использовать на функции из JQuery

$(document).on('change', 'select', function(){ 
// your code 
});

http://api.jquery.com/on/

источник

2013-05-12 21:08:20 sergioadh

Ваш синтаксис для '.on()' неверен. Неверный порядок для параметров. – jfriend00

Мой плохой, исправил его. Я добавил ссылку на документацию в любом случае. – sergioadh

Попробуйте (с JQuery) -

$(function(){ 
    $(document).on('change','select', function(){ 
    // do something here... 
    var val = $(this).val(); 
    }); 
});

Это будет работать даже если вы добавите динамический динамический выбор в несколько раз

источник

2013-05-12 21:14:31

Слушатель событий в элементах, добавленных после загрузки содержимого DOM

ответ

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