Jquery binding event.

Question

<img id="sun" href="logo.jpg"/>

How do I use JQuery to bind it so that when "sun" gets clicked, something happens? I just want bind onclick to sun.

Answer 1

I'm assuming "sun" is an element with the id "sun".

$("#sun").click(function(){
  alert("I was clicked!");
});

Answer 2

If sun is an id,

$('#sun').click( function(eo) {
    // your code here
});

if sun is a class,

$('.sun').click( function(eo) {
    // your code here
}

Answer 3

You mean this sun ☼ ?

Answer 4

If Sun is an id:

$("#sun").click(function(ev){
    // this refers to the dom element
    alert("I was clicked!");
    return false
});

Perhaps it is class:

$(".sun").click(function(ev){
    // this refers to the dom element
    alert("I was clicked!");
    return false
});

Or maybe a class, and the element may be created well after page load - eg via AJAX or DOM manipulation.

$(".sun").live('click',function(ev){
    // this refers to the dom element
    alert("I was clicked!");
    return false
});

JQuery API references:

• selectors http://api.jquery.com/category/selectors/
• .click() http://api.jquery.com/click/
• .live() http://api.jquery.com/live/