Javascript 如何在图像上添加单击功能

我试图编写一个函数，这样当我点击一个图像时，它就会加载外部内容

<section class='images'>
<img class="review-img" id="lifeofpi" src="./images/lifeofpi.jpg"></img>
</section>

    $(document).ready(function(){
    $("#lifeofpi").click(function(){
        $("#lifeofpi").load("lifeofpi.txt #p1");
    });
});

---

当我单击图像时，我希望它从文本文档加载此外部内容。但是，当我单击图像时，什么也没有发生。

您正在尝试将内容加载到图像中。您需要将它添加到一个实际上可以有子元素的元素中

<section class='images'>
  <img class="review-img" id="lifeofpi" src="./images/lifeofpi.jpg">
  <div id="lifeofpi_details"></div>
</section>

    $(document).ready(function(){
    $("#lifeofpi").on("click", function () {
        $("#lifeofpi_details").load("lifeofpi.txt #p1");
    });
});

---

了解

为什么要将文本文件加载到图像中？你到底想发生什么？单击图像，然后在何处添加内容？我知道您不希望将其添加为图像的子级，因为图像没有子级。我只希望它加载有关图像本身的内容。例如，如果它是一部电影。当我单击图像时，它会加载txt文件并提供有关电影的详细信息，例如发布年份，评级etcSo您需要将目标添加到您希望内容的位置…当我单击图像时，我想让它弹出一个包含该图像内容的框您是否包括jquery？如果我想加载一个小的弹出框，我会使用lifeofpi.html而不是。否，您会使用CSS使其成为模态/弹出/工具提示等。或者使用一个这样的库你的文本文件有一个id为p1的元素吗？是的，文档有一个id为p1的元素

$("#lifeofpi").on("click","#p1 lifeofpi.txt",function (e) {
e.preventDefault();
alert(this.id);
});