Learning jQuery

In this post, I will show you a simple jQuery tip to group multiple function on single element or multiple element using jQuery. For example, you need to define 3 functions click, mouseover and mouseout on any element.

jQuery supports binding functions so that they all can be defined within the same group. This is useful in keep your code tidy. Below code snippets shows how to group multiple function in jQuery.

$('#foo').bind({
  click: function() {
        // do something
 },
  mouseover: function() {
    // do something
 },
  mouseout: function() {
        // do something
 }
})

For demo, I have placed a div and binded 3 different function (click,mouseover and mouseout) on div element together. On click, I am showing an alert box and on mouseover and mouseout, changing the forecolor of the div text using css.

$(document).ready(function(){
  $('#dvText').bind({
     click: function() {
        alert('Click event');
     },
     mouseover: function() {
        $(this).css("color", "Red");
     },
     mouseout: function() {
        $(this).css("color", "Black");
     }
  })
});

Feel free to contact me for any help related to jQuery. I will gladly help you.