如何在点击图片时运行javascript函数？

Question

我有这个网站：

<ul class="cont_ul4"> 

<li class="cont_li"> 
<div class="cont_picture"> 
<a href=""><img src="1.jpg" width="150" height="225" ></a> 
</div> 
</li> 

<li class="cont_li"> 
<div class="cont_picture"> 
<a href=""><img src="2.jpg" width="150" height="225" ></a> 
</div> 
</li> 

</ul> 

这个功能：

function ajax_request() { 
$('#placeholder').html('<p><img class="loader" src="/loader.gif"></p>'); 
$('#placeholder').load("/test.php?id=1234556"); 
} 

我需要的是当我在图像上点击来触发此功能。

与输入按钮我可以这样做：

<input type="button" onclick="ajax_request()" value="Click Me!" /> 

什么想法？ 感谢

Answer 1

给你的图像的ID：

<img id="myImage" src="1.jpg" width="150" height="225" style="cursor:pointer"> 

在Javascript

然后：

$("#myImage").click(ajax_request); 

或者，如果你想运行的所有图像相同的功能：

$("img").click(ajax_request); 

但是它会更好，让您的图像的CSS类，然后使用它。这样，你可以限制点击动作将特定的图片：

<img class="link-image" src="1.jpg" width="150" height="225"> 
... 
<img class="link-image" src="2.jpg" width="150" height="225"> 

然后：

$(".link-image").click(ajax_request); 

Answer 2

试试这个：

JS：

function ajax_request() { 
    $('#placeholder').html('<p><img class="loader" src="/loader.gif"></p>'); 
    $('#placeholder').load("/test.php?id=1234556"); 
} 


$('#run_ajax').click(ajax_request); 

HTML：

<input type="button" id='run_ajax' value="Click Me!" /> 

Answer 3

是找这样的事情？：

$(function(){ 
    $("img").click(function(){ 
     ajax_request(); 
    }); 
});