jQuery没有捕捉到某些加载内容的点击

jQuery is not catching click on some content loaded

本文关键字：加载 jQuery      更新时间：2023-09-26

我正在使用带有Zoomy和jmpress插件的jQuery 1.7.2。我也在使用从 initializr.com 下载的样板+引导程序

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

我使用 jmpress

作为演示插件，每次找到角色时都会从一张照片转到另一张照片。 jmpress 通过 ajax 加载内容（我需要这种行为），因为我想要一个相当快的 Web 加载。

问题： .on（"click"） 事件未捕获加载的内容中存在的元素之一。

例如，我将解释其中一个字符的问题（只是部分代码）。

我的索引中有一些div 来加载字符.html我将采用护士角色：

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

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

这是护士的守则.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>

如您所见，我在 #nursediv（具有 .step 类）中加载了两个div。

当我尝试捕获点击事件时，我的 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.描述并出现图像后，它不会。就像那个div.imagen甚至其中的元素都不存在一样。未捕获单击事件。我试图捕获鼠标移动事件，它确实如此。

为什么没有抓住点击？知道吗？

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

和不工作的版本：[已删除]

更新：我忘了，如果我使用 .on（"点击"），它不起作用。但是，如果我使用.on（"鼠标移动"）例如，它可以工作。这是奇怪的部分。on（） 正在工作，但不适用于 click 事件。

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

同样，您需要将on用于稍后加载的内容：

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

将body替换为保存.step元素的最接近的静态元素。
静态意味着当你执行该行时，DOM 中存在：

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

例：

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

委托事件的优点是，它们可以处理以后添加到文档中的后代元素中的事件。通过选取在附加委托事件处理程序时保证存在的元素，可以使用委托事件来避免频繁附加和删除事件处理程序的需要

on文档

您正在使用的缩放插件执行以下操作：

 'click': function () {
    return false;
}

由于您在图像上单击的元素实际上是缩放元素，因此这些元素首先处理事件。他们通过returning false来处理它，这意味着既要做e.stopPropagation()，也要做e.preventDefault()。所以这个事件甚至不会来.imagen.

您的代码中还有未终止的多行注释，不确定它的作用，但它不可能是好的。考虑只删除代码，而不是将其注释掉。

无论如何，像这样清除所有内容：

$.cache = {}; //Can also do $("*").off() I think

然后做：

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

而且它工作正常。您可能希望编辑插件以执行此操作：

'click': function (e) {
    e.preventDefault();
}

或者，您可以寻找由知道自己在做什么的人开发的插件或自己编写。

在 http://zoomy.me/Options.html 的文档中，您可以通过在可点击选项中添加 true 来允许插件具有可点击区域。

因此，在元素上调用zoomy()时，您所要做的就是在 zoomy 函数中添加一些代码。

$('.element').zoomy({clickable:true});

这应该解决一切，

在单击事件上捕获函数的替代方法如下所示。

    <div onclick="fireClickEvent();" > Just firing the click event!</div>
    function fireClickEvent() {
        console.log(event.target);
    }
相关文章：