Javascript jQuery无法捕获对加载的某些内容的单击

我将jQuery1.7.2与Zoomy和jmpress插件一起使用。另外，我正在使用从initializer.com下载的样板+引导

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

我使用jmpress作为一个演示插件，每次找到角色时都可以从一张照片切换到另一张照片。jmpress通过ajax加载内容（我需要这种行为），因为我想要非常快速地加载web

问题：加载的内容中存在的元素之一未捕获.on（“单击”）事件

作为一个例子，我将用其中一个字符解释我的问题（只提取部分代码）

我在index.html中有一些div来加载字符，我将使用护士字符：

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

我还试着用“body”标签看看会发生什么

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

如果在消息显示时检查控制台（div.descripion），它将捕获事件并打印。但是，在删除div.description并显示图像后，它就没有了。比如说，如果div.imagen甚至里面的元素都不存在。未捕获单击事件。我试图捕捉mousemove事件，但它确实捕捉到了

为什么不点击？有什么想法吗

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

和非工作版本：[已删除]

更新：我忘了，如果我使用.on（“单击”）它不起作用。但如果我使用.on（“mousemove”），它就可以工作。这就是奇怪的地方。on（）正在工作，但不适用于click事件

---

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

再次，您需要对以后加载的内容使用

：

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

将
正文
替换为保存
步骤
元素的最近的静态元素。

静态意味着在执行该行时DOM中存在：

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

例如：

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

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

对于以后加载的内容，您需要再次使用上的
：

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

将
正文
替换为保存
步骤
元素的最近的静态元素。

静态意味着在执行该行时DOM中存在：

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

例如：

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

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

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

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

由于在图像上单击的元素实际上是缩放元素，这些元素首先处理事件。他们通过返回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();
}

或者，你可以寻找一个插件，该插件是由知道他们在做什么的人开发的，或者自己编写。
你正在使用的zoomy插件可以实现以下功能：

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

由于在图像上单击的元素实际上是缩放元素，这些元素首先处理事件。他们通过返回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();
}

或者，你可以寻找一个插件，该插件是由知道他们在做什么的人开发的，或者是你自己编写的。
在中的文档中，你可以通过在“可点击”选项中添加“真”来允许该插件有一个可点击区域

因此，在对元素调用
zoomy（）
时，只需在zoomy函数中添加一点代码

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

这应该可以解决所有问题，
在中的文档中，您可以通过在可单击选项中添加true来允许插件具有可单击区域

因此，在对元素调用
zoomy（）
时，只需在zoomy函数中添加一点代码

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

这应该可以解决所有问题，
点击事件捕捉函数的替代方法如下所示

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

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

刚刚启动点击事件！
函数fireClickEvent（）{
console.log（event.target）；
}
捕获单击事件函数的替代方法如下所示

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

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

刚刚启动点击事件！
函数fireClickEvent（）{
console.log（event.target）；
}
该死。比我快-当我看到你发帖子时，我正在打答案。（+1）扩展格多龙的答案a