Почему не работает JS после загрузки Iframe?

Question

[tokieee]

Страница: imatte.ru/work/iframe

При клике на ссылку грузится внешний сайт в модальной окно в iframe, после чего в консоли вылезает ошибка:

Uncaught TypeError: Cannot set property 'onclick' of null

В модальном окне есть кнопка "Back", при клике на которую модальное окно должно закрываться. Однако при клике на нее ничего не происходит.

JS код:

$(document).ready(function() {
	$('a[rel=iframe]').on('click', function(event) {
		event.preventDefault();
		var link = $(this).attr('href');
		$('.modal').html('<div class="back">Back</div><iframe src="'+link+'" frameborder="0"></iframe>');
		$('.modal').fadeIn(400);
	});

	$('.modal .back').on('click', function(event) {
		event.preventDefault();
		$('.modal').fadeOut(400);
	});
});

HTML

<div class="modal">
</div>
<a href="http://investkuban.ru/presentation/" rel="iframe">Open iframe</a>

При этом если выполнять код в консоли, всё работает. Что я делаю не так?

Answer 1

[Алексей Зуев]

На странице отсутствует элемент с id moar
Насчет того, почему у Вас переходы не работают. Вы пытаетесь привязать обработчик к элементу $('.modal .back'), которого еще нет в DOM. Вариант вешать обработчик после вставки в DOM или использовать делегирование и ловить в 3 фазе всплывания события

$(document).on('click', '.modal .back', function(e) {
    $(this).closest('modal').fadeOut(400);
  });

Comments

[Евгений Петров]

Только лучше $(this).closest('modal') ну и далее. А то для всех элементов с классов вызовете реакцию.

[Алексей Зуев]

Так лучше? Вообще непонятно, зачем там preventDefault, если клик по диву ловим

[tokieee]

Алексей Зуев: саблайм сам его подставил, я просто быстро я демо набросал. :)