Question

我有这个HTML：

<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

你在寻找这样的东西吗？：

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

Answer 3

试试这个：

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!" />

单击图像时如何运行javascript函数？

3 个答案: