Tag Archives: bind

Custom Events in jQuery – bind & trigger

Written by Garry Lachman (Admin). Posted on September 8, 2011. Filed under JavaScript, jQuery. Tagged , , , , , , , , . .

Sometimes custom events can make the life more easy.
If you want to communicate between classes and other object on the page you can simply
trigger a custom event with data.

First of all we create data exchange div:

1
<div id="data_exchange"></div>

Now we need to listen the “data exchange” div to receive the events.

1
2
3
$('#data_exchange').bind('event_name', function(event, data) {
  alert(event + ": " + data);
});

We show alert popup when we receive the event “event_name”.

The next step is dispatch the event to the “data exchange”:

1
$('#data_exchange').trigger('event_name', 'our data');

Have a nice day ;)
Garry Lachman

Share