Почему при нажатии на кнопку не приходит ответ?

Question

[khodos_dmitry]

Есть такой код, который передает запрос на страницу с генерацией таблицы. При загрузке страницы таблица генерируется нормально, т.е. get_table(1); работает нормально.

get_table(1);
	
	pags = document.getElementsByClassName('pag');
	
	for (var i = 0; i < pags.length; i++) {
		pags[i].addEventListener('click', pagination);
	}
	function pagination() {
		var page = this.dataset.page;	
		get_table(page);
	}
	function get_table(page) {		
		console.log(page);
		$.ajax({
			method: 'POST',
			url: 'cpl_offices_create_table.php',
			data: {page: page}
		}).done(function(html) {
			$('#office-table').html(html);
		});
	}

Есть такая кнопка, при нажатии на которую, первая страница, генерируемая get_table(1); должна заменяться 10-ой. Но, при нажатии на кнопку ничего не происходит. Даже в консоль ничего не выводится. Пробовал ставить onclick="pagination()" , тоже ничего.
<button class="pag" data-page="10">10</button>

Answer 1

[Medin K]

У вас элементы с классом pag имеются на странице или приходят вместе с таблицей?
Мне кажется ответ в этом.

Comments

[khodos_dmitry]

Приходят вместе с таблицей. Как быть в этом случае?

[Medin K]

khodos_dmitry,

.done(function(html) {
      $('#office-table').html(html);
      // вот тут добавлять евенты
    });

лучше как Johnny Lowhunter предлагал, иначе евенты старые удалять как то тоже надо

[AUser0]

Так логично же, перенести addEventListener внутрь функции .done, после $('#office-table').html(html);.

Answer 2

[Somewhere Intech]

не могу понять причину, но попробуйте так:

window.onclick = function(e){
	if(e.target.classList.contains('pag')){
		pagination.bind(e.target)();
	}
}