Question

我正在尝试编写一个函数，以便在单击图像时加载外部内容。

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

当我点击图片时，我希望它从文本文档中加载此外部内容。但是当我点击图像时没有任何反应。

Answer 1

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

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

Answer 2

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

了解event-delegation

如何在图像上添加点击功能

2 个答案: