Event helpers

This page discusses - Event helpers

Event helpers


Event helpers

As we all know events are actions or occurrences detected by a program. And event handlers are methods which handles the event. And ' event handler attachment ' or ' event helpers ' are those methods which helps them for an specific  purpose. For example 'bind' is used to associate an event with an element which may be paragraph, div, span etc.

Given below the 'event handler attachment' or 'event helpers'  :


Click here to see details


Click here to see details


This method attach a handler to the event for all elements which match the current selector, now or in the future.

Example :

Following code binds the click event to all paragraphs. And add a paragraph to another clicked paragraph :

<p>Click me!</p>
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");

.die( )

This method removes the handler which is previously attached using 'live( )' from the elements.

Example :

Following code binds and unbinds events to the buttons :

$("#bindbutton").click(function () {
$("#button1").live("click", aClick)
.text("Can Click!");
$("#unbindbutton").click(function () {
$("#button2").die("click", aClick)
.text("Does nothing...");

Here 'aclick' is a user defined function which display a 'div' on button click. Using 'die' it detach the click event from 'aClick' function.

.one( )

This method attach the element with an event.  The main difference between it and '.bind()' is that it will execute only once .After this , it is unbind automatically.

Example :

Following code will display an alert box on clicking element 'foo' :

$('#foo').one('click', function() {
alert('This will be displayed only once.');

jQuery.proxy( )

This method takes a function and returns a new one that will always have a particular scope.

Example :

It will enforce the function :

var obj = {
 name: "John",
 test: function() {
 alert( this.name );
 $("#test").unbind("click", obj.test);

$("#test").click( jQuery.proxy( obj, "test" )

.trigger( )

This method executes the event which is attached with the matched elements.

Example :

Following code triggered the click event on 'foo' element manually .

$('#foo').bind('click', function() {

.triggerHandler( )

This method executes all handlers attached to an element for an event :

Example :


Learn from experts! Attend jQuery Training classes.

Share on Google+Share on Google+

Event helpers

Posted on: April 18, 2011 If you enjoyed this post then why not add us on Google+? Add us to your Circles



Discuss: Event helpers  

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
June 14, 2011
Ptoblem about the paging link

The link "Previous", "Index", "Next" don't work. I tried in both firefox and ie browser.