[Saratov64]

<script>
window.addEventListener("DOMContentLoaded", function() {
    var btn = document.querySelectorAll(".btn");
    btn[0].addEventListener("click", function() {
        clearInterval(timer);
        timer = setInterval(station1, timeInterval)
    });
    btn[1].addEventListener("click", function() {
        clearInterval(timer);
        timer = setInterval(station2, timeInterval)
    });
    function station1() {
        document.querySelector("#main").innerHTML += "1111 "
    }
    function station2() {
        document.querySelector("#main").innerHTML += "2222 "
    }


    var timeInterval = 1E3;
    var timer = setInterval(station1, timeInterval)
});
  </script>

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

window.addEventListener("DOMContentLoaded", function() {
     $("#menu").on('click', '.btn', function(e)
	..............
  
        });	
  });

где как мне кажется, я напримую указал див $("#menu"), в котором будет появляться кнопка. Но не работает....

торию взял

jQuery работает с элементами, которые были на странице на момент инициализации кода.

Если добавляются новые элементы - при помощи ajax'а или функций типа append() - то события не затрагивают их.

Как же работать с новыми созданными элементами DOM?

Оказывается для динамических элементов используется делегированная обработка событий.

Если кратко, то смысл делегирования в том, что обработчики "навешиваются" не на отсутствующие в dom элементы, а на существующий родительский объект.

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

пример можно подсмотреть тут http://www.keenself.ru/blog/jquery/s..._i_dinamichesk...

я так понял тут надо использовть //

$(this)

- текущий элемент но я не понял, что значит указывать
родительский $(this).parent()......();