Я использую jQuery 1.7.2 с Плагины Zoomy и jmpress. Также я использую шаблон+bootstrap, загруженный с сайта initializr.com
. Я пытаюсь создать "игру" наподобие [Waldo/Wally], когда вам нужно найти какого-нибудь персонажа на фотографии. У каждой фотографии есть свой персонаж, которого нужно найти.
Я использую jmpress в качестве плагина для презентаций, чтобы переходить от одной фотографии к другой каждый раз, когда персонаж найден. jmpress загружает контент через ajax (и мне нужно такое поведение), потому что я хочу довольно быструю загрузку сети.
Проблема:Событие .on("click") не перехватывается одним из элементов, существующих внутри загруженного содержимого.
В качестве примера объясню свою проблему с одним из этих символов (просто взяв часть кода).
У меня в файле index.html несколько div для загрузки символов, я возьму персонажа медсестры:
<div id="nurse" class="step container" data-src="women/nurse.html" data-x="7500">
Loading...
</div>
jmpress загружает data-src (women/nurse.html) через ajax, когда пользователь находится рядом с этим div (шагом). Загружается отлично.
Это код Nurse.html.
<script type="text/javascript">
new Image().src = "img/nurse_big.jpg";
</script>
<div class="descripcion">
<p>Bla, bla, bla.</p>
</div>
<div class="imagen">
<a href="img/nurse_big.jpg" class="zoom"> <img src="img/nurse.jpg" alt="Find the nurse" /> </a>
</div>
Как вы можете видеть, у меня есть два div, загруженных внутри div #nurse (с классом .step).
В моем файле js/script.js есть следующий код, когда я пытаюсь перехватить событие щелчка:
$(".step").on("click", function(event){
console.log(event.target);
});
Я также пытаюсь посмотреть, что произойдет с тегом body
$("body").on("click", function(event){
console.log(event.target);
});
Если вы проверите консоль во время сообщение показывает (div.descripcion), что оно перехватывает событие и печатает. Но после удаления div.descripcion и появления изображения это не так. Например, если этого div.imagen или даже элементов внутри него не существует. Событие клика не перехватывается. Я попытался поймать событие mousemove, и это так.
Почему не ловит щелчок? Есть идеи?
Вы можете увидеть рабочую версию: [Удалено]
И нерабочую версию: [Удалено]
ОБНОВЛЕНИЕ:Я забыл, если я используйте .on("click"), это не работает. Но если я использую, например, .on("mousemove"), это работает. Это странная часть. .on() работает, но не для события click.
ОБНОВЛЕНИЕ 2:Я удалил ссылки на живые примеры, потому что они содержат версии для разработчиков. Ссылку на итоговую работу опубликую, когда она будет опубликована. Спасибо всем за то, что нашли время. Специально для @Esailija, который дает мне ответ.