如何在點擊圖片時運行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(); 
    }); 
});