События для динамически добавленных в DOM элементов?

Question

[Никита Колосов]

Есть страница, в js которой вешаются события определенным элементам, примерно следующим образом:

$(document).ready(function() {<br>
    ...<br>
     $('.clickable-elements a').click(function() {<br>
        //Какое-то действие<br>
    });<br>
   ...<br>
});<br>

Далее, в какой-то момент происходит AJAX запрос к серверу, который возвращает HTML-код, который вставляется в DOM примерно так:

...<br>
     $('.clickable-elements element').html('HTML с сервера');<br>
    ...<br>

Соответственно, в нашем HTML-коде могут появиться теги к которым нужно привязать тоже самое событие, что и другим.

Есть ли способ делать это не через OnClick=«my_function()» в HTML который отдает сервер?

Comments

[Никита Колосов]

relic, не помогает.

Если без абстрактных примеров, то вот:
Было:

<div class="outer">
</div>

$('.block').on('click', 'a.left', function() {
    	alert('Click');
    });

После получения AJAX, получаем

<div class="outer">
<div class="block"><a class="left"></a></div>
<div class="block"><a class="left"></a></div>
<div class="block"><a class="left"></a></div>
</div>

То есть сначала никаких элементов вобще не было, потом появились.
Клик не работает

[Шамиль Хайрулаев]

А как из такого извлечь нажатый элемент?

Answer 1

[relic]

используйте метод on

$(document).ready(function() {
    ...
    $('.clickable-elements element').on('click', 'a', function(e){
        //Какое-то действие
    });
   ...
});

Comments

[Никита Колосов]

Не работает, уточнил вопрос

[PomanoB]

$('.clickable-elements element') — тут в селекторе должен быть элемент, внутри которого появляются новые динамические, в вашем случае $('div.outer')

[relic]

PomanoB правильно уточнил:

$(document).ready(function() {
    ...
    $('div.outer').on('click', 'a.left', function(e){
         //Какое-то действие
    });
   ...
});

[Серж Ткач]

relic: А как быть с ситуацией, когда после добавления элемента, он должен использовать autocomplete?
По факту надо выбирать категории для вновь добавленных элементов

// Category
	$('body .select-category').each(function() {
		$(this).autocomplete({
			'source': function(request, response) {
				$.ajax({
					url: 'index.php?route=catalog/category/autocomplete&token=<?php echo $token; ?>&filter_name=' +  encodeURIComponent(request),
					dataType: 'json',
					success: function(json) {
						var arr = [];
						arr['category_id'] = 0;
						arr['name'] = 'Без категории';
						json.push(arr);
						response($.map(json, function(item) {

							return {
								label: item['name'],
								value: item['category_id']
							}
						}));
					}
				});
			},
			'select': function(item) {
				var label = item['label'].split('>');
				label = label[label.length - 1];
				label = label.trim();
				$(this).val(label);

				// key = $(this).data('category-target');
				$('#input-category-name' + $(this).data('category-target') ).val(label);
				$('#input-category-id' + $(this).data('category-target') ).val(item['value']);
			}
		});
	});


	// rows
	var specific_formula_row_n = <?php echo $specific_formula_row_n; ?>;
	//$('.btn-add-block').click(function(){
	//$('.btn-add-block').on('click', function () {
	$(document).on('click', '.btn-add-block', function (e) {

		$.ajax({
			url: 'index.php?route=extension/module/seo_tags_generator&token&token=<?php echo $token; ?>&getSpecificFormulasForJS',
			dataType: 'html',
			success: function(html) {
				html = html.replace(/{key}/g, specific_formula_row_n);
				html = '<div id="specific-formula-row-formulas'+specific_formula_row_n+'" class="row">' + html + "</div>" ;
				$('#specific-formulas-container').append(html);
			}
		});

		specific_formula_row_n++;
	});

===========
Нашел ответ на свой вопрос и написал его в ответах - События для динамически добавленных в DOM элементов

Answer 2

[Vitaliy Jakim]

$(function() {
        $(document).on('click touchstart', '.selector', function(){ 
            console.log($(this));
        });
    });

Ребятки, добавляем такой кусок кода в js и ловим все события как на телефоне так и на ПК, кроссбраузерно кроссплатформенно.
Не ищите других способов, ибо кто пишет про .delegate() или .live() давно не читали доку jQuery.

Answer 3

[GR0ST]

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

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

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

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

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

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

пример можно подсмотреть тут
moxiemaks.ru/2017/06/25/sobytija-dlja-dinamicheski...

Answer 4

[Илья Шабанов]

jsfiddle.net/B5ycs/

Answer 5

[avalak]

JQuery live?

Comments

[Urvin]

As of jQuery 1.7, the .live() method is deprecated.

[avalak]

Хм, действительно. Надо бы перечитать api.

[fc_arny]

На сколько мне известно, вмсето live сделали метод delegate, в котором были исправлены некоторые баги метода live.

[Сергей Протько]

Live — тот же делигейт только применяется для документа, а не для его части.

Вообще надо бы уже забыть про все это и использовать только on.

Answer 6

[Dubrovin]

Как по мне, так лучше использовать mutation observer и следить за компонентами динамически.

Answer 7

[Даниил]

А если событие не click, а change на input type="file", то что тогда делать?