Как сделать чтобы js работал в элементе, полученным ajax'ом?

Question

[myaca]

подгружаю в какой-либо div файлик с html разметкой формата .html,
при этом, у меня есть обработчик на кнопку по клику, скажем alert обычный внутри, сделал две одинаковые кнопки, одна находится после div'а, в который прогружается новая страничка, а другая в диве.

Та кнопка, которая находится вне дива, верно вызывает обработчик, а та которая в диве - игнорирует событие.

Получается, что элементы, загруженные аджаксом, не воспринимают так просто обработчики, но почему? Как сделать чтобы они понимали их?

Answer 1

[Максим Маркитантов]

$(document).on('click', '.button', function() {
    console.log('click');
  });

Comments

[myaca]

Спасибо, это работает, а можете объяснить, почему так работает?

До этого у меня был такой обработчик, для примера:
$("button").click(function(){
alert("123");
});

Answer 2

[Stalker_RED]

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

Потому что в тот момент, когда вы пытаетесь навешиваете обработчик на кнопку (сразу после загрузки страницы) этой кнопки еще нет.

Как сделать чтобы они понимали их?

Делегирование событий, как и подсказал Максим Маркитантов

$(document).on( // обработчик вешается на сам документ (лучше на родительский элемент)
'click', // слушает все клики
'.button',  // ищет среди них те, что были по элементам с классом .button
function() {
    console.log('click');
  });

Другой вариант: навесить обработчик уже после того как ajax'ом добавили новые кнопки.