0

我正在使用带有 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（具有 .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.descripcion 被删除并且图像出现之后，它就没有了。就像那个 div.imagen 甚至它里面的元素不存在一样。未捕获单击事件。我试图捕捉 mousemove 事件，它确实如此。

为什么没有捕捉到点击？任何的想法？

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

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

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

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

4

4 回答 4

4

再次，您需要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文档

于 2012-06-24T19:37:34.120 回答
2

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

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

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

于 2012-06-24T20:12:20.473 回答
0

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

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

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

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

于 2012-06-24T20:55:21.920 回答
0

在点击事件上捕获该功能的另一种方法如下所示。

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

    function fireClickEvent() {
        console.log(event.target);
    }
于 2016-09-20T07:45:48.560 回答