javascript - jQuery 无法捕获某些已加载内容的点击

Question

我正在使用带有 Zoomy 和 jmpress 插件的 jQuery 1.7.2。我还使用从initializr.com下载的样板+ Bootstrap

当你必须在照片中找到某个 Angular 色时，我正在尝试创建一个像 [Waldo/Wally] 一样的“游戏”。每张照片都有不同的 Angular 色可供查找。

我使用 jmpress 作为演示插件，每次找到 Angular 色时都会从一张照片转到另一张照片。 jmpress 通过 ajax 加载内容(我需要这种行为)，因为我想要快速加载网络。

问题: .on("click") 事件没有被加载内容中存在的元素之一捕获。

作为示例，我将使用其中一个字符来解释我的问题(仅获取部分代码)。

我的index.html中有一些div来加载 Angular 色，我将采用护士 Angular 色:

<div id="nurse" class="step container" data-src="women/nurse.html" data-x="7500">
  Loading...
</div>

当用户靠近该 div(步骤)时，jmpress 通过 ajax 加载 data-src (women/nurse.html)。它加载得很好。

这是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>

如您所见，我在 #nurse div(具有 .step 类)内加载了两个 div。

当我 try catch 点击事件时，我的 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 甚至其中的元素不存在一样。没有捕获点击事件。我 try catch mousemove 事件，确实如此。

为什么没有捕捉到点击？有什么想法吗？

您可以看到工作版本:[已删除]

以及不工作的版本:[已删除]

更新:我忘了，如果我使用 .on("click") 它不起作用。但如果我使用 .on("mousemove") 例如，它就有效。这就是奇怪的部分。 .on() 有效，但不适用于点击事件。

更新2:我已经删除了实时示例的链接，因为它们是开发版本。当最终作品发布时，我将发布链接。感谢大家抽出宝贵的时间。特别是@Esailija，它给了我答案。

Answer 1

再次，您需要使用 on 来加载稍后加载的内容:

$("body").on("click", ".step", function(event){
    console.log(event.target);
});

将 body 替换为包含 .step 元素的最接近的 static 元素。
静态意味着当您执行以下行时存在于 DOM 中:

$(...).on("click", ".step", function(event){

示例:

$('#ContainerId').on("click", ".step", function(event){
    // Do what you want.
});

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers

on docs