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

我正在尝试编写一个函数，以便在单击图像时加载外部内容。如何在图像上添加点击功能

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

当我点击图片时我希望它从文本文档中加载这个外部内容。但是当我点击图片时，什么都没有发生。

来源

2017-03-09 Car

你为什么加载一个文本文件转换为图像？你想要发生什么？点击图片，内容添加到哪里？我知道你不希望它被添加为图像的孩子，因为图像没有孩子。 – epascarello

我只是想要它加载关于图像本身的内容。例如，如果它是一部电影。当我点击图像时，它会加载txt文件并提供有关电影的详细信息，例如发布年份，评分等 – Car

因此，您需要将目标添加到您想要的内容去... – epascarello

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

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

来源

2017-03-09 00:56:55 epascarello

如果我想加载一个小弹出框，我会用lifeofpi.html而不是 – Car

不，你会使用CSS来使它成为模式/弹出/工具提示等。或者使用一个库。 – epascarello

我刚刚试过了它不起作用的代码 – Car

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

阅读event-delegation

来源

2017-03-09 01:05:17

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

回答

相关问题