Custom Events

May 7th, 2009
Goto comments Leave a comment

Change the value of the drop down to see the events fired. Inline bind 1 and 2 will show you how to update an html element via a triggered event. In order to see the Object updates, you will need to have firebug installed. It will log the output to firebugs console.

Inline bind 1:

Inline bind 2:

Here is the code, or you can download it here:

  1. $(’select.test’).change( function() { $(’select.test’).trigger(‘update’, $(this)); } );
  3. $(’select.test’).bind(‘update’, function(e, data) { $(‘.test1′).html(data) });
  4. $(’select.test’).bind(‘update’, function(e, data) { $(‘.test2′).html(data) });
  6. var object1 = new function() {
  7.     var obj = this;
  8.     this.name = “Object 1″;
  10.     $(’select.test’).bind(‘update’, function(e, data) { obj.update(data); });
  12.     this.update = function(data){
  13.         console.log(“Update from %o with %o”, this, data);
  14.     };
  16.     return this;
  17. };
  19. var object2 = new function() {
  20.     var obj = this;
  21.     this.name = “Object 2″;
  23.     $(’select.test’).bind(‘update’, function(e, data) { obj.update(data); });
  25.     this.update = function(data){
  26.         console.log(“Update from %o with %o”, this, data);
  27.     };
  29.     return this;
  30. };
Bookmark and Share
  1. No comments yet.
  1. No trackbacks yet.