how to run javascript function when click on image?

Question

i have this 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>

and this function:

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

what i need is when i click on the image to trigger this function.

with an input button i could do this:

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

any ideas? Thanks

Just assign a click() event handler to it: api.jquery.com/click — Blazemonger
– Blazemonger, Commented Nov 4, 2011 at 17:01

Vivin Paliath · Accepted Answer · 2011-11-04 17:01:58Z

5

Give your image an id:

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

Then in Javascript:

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

Or if you want to run the same function for all images:

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

However it would be better to give your images a CSS class and then use that. That way you can restrict the click action to specific images:

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

Then:

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

answered Nov 4, 2011 at 17:01

Vivin Paliath

95.8k42 gold badges230 silver badges302 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James Johnson · Accepted Answer · 2011-11-04 17:07:04Z

1

Are you lookin for something like this?:

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

answered Nov 4, 2011 at 17:07

James Johnson

46.1k8 gold badges75 silver badges111 bronze badges

1 Comment

nrod Over a year ago

Thanks @James Johnson... that's just what I was looking for but not for Ajax. With some minor changes: $('#usedSince').datepicker('setDate', null);

Naftali · Accepted Answer · 2011-11-04 17:01:52Z

0

Try this:

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

answered Nov 4, 2011 at 17:01

Naftali

147k41 gold badges247 silver badges304 bronze badges

Collectives™ on Stack Overflow

how to run javascript function when click on image?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related