tags:

views:

47

answers:

1

I'm attempting to build a way for my selectors to 'listen' to 'global' events that are beyond the typical 'click' 'change' 'submit' etc. I've explored the various 'eventmanagers' that I could find, and they're all still designed for forms. Is there any way to do something like this for non-standard (i.e. custom) events? The goal is to have selectors subscribe to an event, and then be able to trigger it in one place and it will raise it for everything subscribed to it.

Inserting example for demonstration.

 return this.each(function () {
  $(this).live('ON_CONTENT_CHANGING', function (e) {
   $(this).block({
    overlayCSS: { opacity: 1, color: '#000' },
    timeout: 800
   });

   e.preventDefault();
  });

  $(this).live('ON_CONTENT_CHANGED', function (e) {
   $(this).sliding();
   $(this).unblock();

   e.preventDefault();
  });

// rest of plugin...

$("*").trigger('ON_CONTENT_CHANGING');
+5  A: 

This is built into jQuery, for example:

$(".button").bind("myEvent", function() {
  alert("myEvent fired on " + this.id);
});

Trigger by:

$("*").trigger("myEvent");

Or on a specific element (or any selector, like everything else jQuery):

$("#myButton").trigger("myEvent");

This uses .bind() and .trigger(). As Jacob points out in comments, you can also bind with .live() to custom events in 1.4+, like this:

$(".button").live("myEvent", function() {
  alert("myEvent fired on " + this.id);
});
Nick Craver
In addition, if you use "live()" instead of "bind()" you can bind to a selector and new elements that match the selector will be subscribed for that event, even if they didn't exist when you set up the binding.
JacobM
@JacobM:: However, keep in mind that live prior to 1.4 was limited to click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup. Source: http://api.jquery.com/live/
R. Bemrose
I have read somewhere that the "*" selector is pretty bad to use, is there any truth to that? Won't this propogate to every item in the DOM?
Stacey
Hrnm. This doesn't seem to work with live() even on jquery 1.4 for me.
Stacey
@Stacey - Have a link to the non-working example? And yes, `"*"` goes to every DOM object, you can restrict it down to things you know are bound, classes, inputs, whatever that may be.
Nick Craver
Yeah, I've posted my code that doesn't work. The binding is done inside of the plugin.
Stacey
@Stacey - If you're using `"*"` I wouldn't use `.live()` in that case you need to trigger it for a specific selector, like on a class, otherwise it'll bubble and fire many, many times.
Nick Craver
Hrnm... That takes me back to square one.. Thanks for all of the information. This helps a lot with a lot of things.
Stacey
@Stacey - If you have `$(this)` just use `.bind()` instead of `.live()`, `.live()` listens for a selector...but with `$(this)` you already have the element, just `.bind()` right to it, then `'$('*').trigger()` is an option.
Nick Craver
@OMG Unicorns: In jquery 1.3.x live() could bind to the events you mention *plus custom events*, so it would work for this issue even in 1.3.
JacobM