Создаю кнопку через jQuery, ajax?

Question

[Ambrel]

У меня появилась одна проблемка. Я создаю кнопку через jQuery. И даю ему class="test". И при клике на .test у меня не выходит alert. Как исправить ?

$('.test').on('click', function(e) {
		alert('test');
	});

function createPagination(pagination) {
	$('.table-results').append('<tr>\
		<td scope="row" colspan="18"><button class="test">test</button></td>\
	</tr>');
}

Answer 1

[Евгений]

на момент навешивания события элемента с классом test не существует

$('body').on('click', '.test', function(e) {
    alert('test');
  });

Answer 2

[Владимир Проскурин]

Это по той причине, что событие привязывается к существующим элементам, а к новым нет. Выхода 2
1) Привязывать клик к корневому элементу, который не удаляется/добавляется.

$('.table-results').on('click', '.test', function(e) {
    alert('test');
  });

2) При создании элемента, сразу привязывать к нему событие.

Answer 3

[Ihor Bratukh]

Лучший вариант это

$('.table-results').on('click', '.test', function(e) {});

Еще вы можете возвращать только что созданный элемент и вешать на него событие. Пример

$('#create').on('click', function() {
	$(this)
	.after('<button class="test">Test</button>')
	.next('.test')
	.on('click', function() {
		alert('CLICK');
	});
});

Answer 4

[Ambrel]

Вот например: https://jsfiddle.net/jm78xsze/