如何在圖像上添加點擊功能

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

閱讀有關事件委托的信息