Question

我正在使用带有Zoomy和jmpress插件的jQuery 1.7.2。我也在使用从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>

当用户靠近该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中加载了两个div（具有.step类）。

当我尝试捕获click事件时，我在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（“点击”）它就不行了。但是，如果我使用.on（“mousemove”），它可以工作。那是奇怪的部分。 .on（）正在运行，但不适用于点击事件。

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

Answer 1

您需要再次使用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 docs

Answer 2

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

 '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();
}

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

Answer 3

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

因此，在元素上调用zoomy()时，您只需在zoomy函数中添加一些代码。

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

这应该可以解决所有问题，

Answer 4

在click事件中捕获函数的另一种方法如下所示。

    <div onclick="fireClickEvent();" > Just firing the click event!</div>

    function fireClickEvent() {
        console.log(event.target);
    }

jQuery没有捕获点击加载的一些内容

4 个答案: