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");
    });
});