Как повесить событие на подгружаемые ajax'ом элементы?

Question

[BlahBlag01]

Внутри ссылки есть блок с классом fav, по нажатию на него происходит добавление в избранное, проблема в том, что он внутри ссылки и когда я пытаюсь на него нажать вместо того, чтобы добавить в избранное оно переходит по ссылке. Я набросал небольшой скрипт, чтобы предотвротить это, но на вновь подгруженные элементы оно не распространяется

<a href="/ad/{{ $ad->id }}" class="ad" data-id="{{ $ad->id }}">
						<div class="preview">
							{{ HTML::image("/images/bulletins/$images[0]", "$ad->title") }}
						</div>
						<div class="title">
							{{ $ad->title }}
							<span>Lorem ipsum.</span>
						</div>
						<div class="price">{{ $ad->price }} руб.</div>
						<div class="date">
							<time class="timeago" datetime="{{ $ad->created_at }}"></time>
						</div>
						<div class="star fav" data-id="{{ $ad->id }}"><img src="assets/star.png"></div>
				</a>

$(document).on("click", ".fav", function(){
			$(document).on("click", ".ad-append a", function(e) {
				e.preventDefault();
				console.log("okay");
			});
		});

Answer 1

[Андрей Ежгуров]

Не надо заворачивать on в on.

Чтобы повесить обработчики на все элементы ".ad-append a", которые появятся на странице, достаточно:

$(function(){
  $(document).on("click", ".ad-append a", function(e) {
    e.preventDefault();
    console.log("okay");
  });
});

Comments

[BlahBlag01]

вопрос читай

[Андрей Ежгуров]

Глупость N 1. Поместить активный элемент внутри ссылки. Мог бы разместить его вне тега - и не искать приключений. Глупость N 2 (о чём я ...

[Андрей Ежгуров]

Глупость N 1. Поместить активный элемент внутри ссылки. Мог бы разместить его вне тега <a> и не искать приключений.

Глупость N 2. Размещать on внутри on - как я уже говори выше.

Глупость N 3. Вместо того, чтобы остановить всплытие события при щелчке по .fav, ты вешаешь ещё один обработчик щелчка на ".ad-append a", в котором останавливаешь всплытие. Разумеется, ничего не работает.

Резюме: начни, наконец, читать учебники.

Answer 2

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

Читать в следующем порядке:
Всплытие и перехват событий
Делегирование событий

Answer 3

[shearlocktm]

Используйте live

// было бы, если бы контент элемента #main не подгружался AJAX'ом
$('#main a').click(function(event){
    console.log($(this).attr('href'));
    return false; // отменяем действие по умолчанию и всплытие события
});
 
// теперь предположим, что контент элемента #main подгружается AJAX'ом
// вносим минимум изменений в предыдущий код
$('#main a').live('click', function(event){
    console.log($(this).attr('href'));
    event.preventDefault(); // отменяем действие по умолчанию, но не трогаем bubbling - чтобы не мешать другим обработчикам
});

Подробнее тут

Comments

[den007]

live в версии 2 считается устаревшим on вполне выполняет его функции.