Почему не срабатывает событие .click после pjax загрузки?

Question

[kr_ilya]

Имеется контейнер в который с помощью pjax подгружается контент и кнопка в этом контейнере.

<div class="pjax_cont">
  <button id="test">ТЕСТ КЛИКА</button>
  <a class="testpjax" href="/faq">ССЫЛКА</a>
</div>

pjax

$(function () {
		$(document).pjax('.testpjax', '.pjax_cont', {fragment: '.pjax_cont'});
	});

Клик

$('#test').click(function(){
console.log('test клика')
	});

Если кликнуть по кнопке ТЕСТ КЛИКА до срабатывания Pjax, то функция срабатывает (в консоли выводится test клика), но если нажать на ССЫЛКА, тем самым перейти на другую страницу (перезагрузить контент в контейнере pjax_cont) и после этого вернуться назад и кликнуть, то событие не срабатывает. Если расположить кнопку за пределами "перезагружаемого" контейнера, то она срабатывает и до и после pjax запроса. Пробовал ставить обработчики кликов на классы (.test) - результат не меняется. В чем может быть проблема и как её решить?
UPDATE
Если поместить обработчик клика

$('#test').click(function(){
console.log('test клика')
	});

в теги script в перезагружаемом контейнере, то тоже все работает, но мне так не надо...

Answer 1

[Anton fon Faust]

Вы перезагружаете содержимое контейнера, соответственно, у вас уже другой экземпляр кнопки создается.
Поэтому и обработчика события на нем нет.
Выхода два:
1) после обновления контента вешать обработчик события заново.
2) повесить обработчик на один из родителей и анализировать event.target, а заодно почитать про паттерн behavior и всплытие событий... например, тут )

Comments

[kr_ilya]

Попробовал написать так

$(document).on('click', '#test', function(){

})

И оно, на мое удивление, заработало

[Anton fon Faust]

Energy2, это называется events bubbling, оно же всплытие событий в DOM