jQuery не улавливает щелчки по загруженному контенту

Я использую 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, который дает мне ответ.

0
задан Yaazkal 24 June 2012 в 21:42
поделиться