Javascript .on（）jQuery click函数不起作用？

我试图在我的JSFIDLE中实现一个简单的点击功能，但它不起作用

以下是我的javascript/jquery：

$(document).on("click", "#introPic", function () {
    $("#introduction").addClass("hide")
    $("#q1").removeClass("hide")
});

我不理解，因为如果我将有问题的元素introPic从它嵌套的divs中取出，并将其放在文档的顶部，它就会工作。这不是一个解决方案，因为它破坏了所有html/css格式

.ononly是否仅适用于未嵌套的ID

这是JSFIDLE-

这是修改后的版本，将简介移到html的顶部-

试试这个：

<script>
$(function(){
    $(document).on("click", "#introPic", function () {
        $("#introduction").addClass("hide");
        $("#q1").removeClass("hide");
    });
});
</script>

---

您的代码不起作用，因为您忘记了用分号终止行。

您的代码很好。问题是介绍被放在body元素后面，因为z-index:-99是在介绍的容器内容上设置的。因此，点击内容中的任何元素实际上都会点击body元素。只需删除z索引，它就可以正常工作

---

这里有趣的是，正文的背景应该覆盖内容，但只有在为html元素指定一些背景时才会发生这种情况。

您忘记了用；来终止行：事实上，你的内容被放在正文后面，这是因为z-index:-99，所以实际上你不能点击introduction@num8er不是可选的$function{$document.onclick，introPic，function{$introduction.addClasshide；$q1.removeClasshide；}；}；谢谢@KingKing，我已经更改了z-索引，现在可以使用了-如果你将其添加为答案，我会接受我没有否决正确的答案；我否决了你的答案，这是不对的。King.Ok将解决方案作为上述评论发布。下次请在投票后写下原因：我在用手机，所以我看不出问题的全貌。检查一下。请原谅。我错了。