jQuery Add Multiple Handlers To Selector

This tutorial I will show you how to add multiple handlers to a selector such as a class or id in jQuery.
In this example I a need to attach mouseover and click events to an image.

Step 1
Add the following image to your page

<img src="link_to_your_image" class="photo" />

Step 2
Add the following jquery code that will give you both handlers to use.

$(document).on({
    mouseenter: function() {
        alert("Mouse over item");
        // Add your codes here
    },
    mouseleave: function() {
        alert("Mouse left item");
        // Add your codes here
    },
    click: function() {
        alert("Item clicked");
        // Add your codes here
    }
}, ".photo");

Save your file, you should now mouse over your link to see the alerts and then click on the link to see the final alert.

That’s it. Leave a comment below or follow us on Twitter for more tutorials.


  1. inhouse pharmacy says:

    I love the data on your website. Thank you so much.

  2. how to plan my wedding says:

    Hi,I read your new stuff named daily.Your writing style is witty, keep up the good work!

  3. 4rx says:

    I love reading through your internet site. Thanks a ton!

Please Post Your Comments & Reviews

Welcome to Western Studios

We provide professional website and mobile softwares including Joomla, Wordpress and more.