Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
In this video we will discuss binding event handlers to events using bind() method in jQuery
One way to bind event handlers to events is by using the jQuery shorthand functions like .click, .mouseover etc. Bind method is another way of doing the same.
The following example binds click event handler to the button – btnClickMe
$(‘#btnClickMe’).bind(‘click’, function () {
$(‘#divResult’).html(‘Button Clicked’);
});
Binds multiple event handlers to the button – btnClickMe. If required, the event object can also be passed to the event handler method, although it is optional.
$(‘#btnClickMe’).bind(‘click mouseover mouseout’, function (event) {
if (event.type == ‘click’) {
$(‘#divResult’).html(‘Button Clicked at ‘ + ‘X = ‘ + event.pageX + ‘ Y = ‘ + event.pageY);
}
else if (event.type == ‘mouseover’) {
$(this).addClass(‘ButtonStyle’);
}
else {
$(this).removeClass(‘ButtonStyle’);
}
});
Use the unbind() method to unbind the event handler
$(‘#btnClickMe’).unbind(‘mouseover’);
To unbind all the event handlers of an element, use unbind() method without any parameters
$(‘#btnClickMe’).unbind()
Please note: If you are using jQuery 1.7 or higher, you should be using on() and off() methods instead of bind() and unbind() methods. We will discuss on() and off() methods in our next video.
