I've been noodling around on how to create a pubsub system that doesn't depend on linking objects and events together. Based on previous post it turns out to be straight forward with bind and trigger (see code below). However, two things I can't figure out. I can't figure out why namespaced events don't work with this. The event's never fire...or at lest the 'bound' objects never receive them.
The other thing is related to 'live'? Shouldn't this work with 'live' as well? <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Conforming XHTML 1.0 Strict Template</title> <script src="pubsub3_files/jquery.js"></script> <script type="text/javascript"> $(function() { //bind an object to an event. //When event is triggered, the function is called with e being the event object // and e.type the name of the event, and e.target the html element, // which should be the same as 'this' scope // ? Can't figure out how to use 'live' instead of 'bind' // ? Namespaced events ('event.namspace') don't seem to work $('#div1').bind('customAjaxStart', function(e, data){ console.log('event.target: '+e.target+ ', event.type: '+ e.type + ', data: '+ data); $(this).slideUp('slow'); }); $('#div2').bind('customAjaxStart', function(e, data){ console.log('event.type: '+ e.type + ', data: '+ data); $(this).slideUp('slow'); }); $('#test').click( function(){ //easily remove a listener with 'unbind' $('#div1').unbind('customAjaxStart'); //triggering events via the $.event scope. //pass in any data. $.event.trigger('customAjaxStart',{user:'something'}); //anything goes with an object $.event.trigger('customAjaxStart',['something2']); //simple data doesn't work unless wrapped in [ ]. }); }); </script> </head><div FirebugVersion="1.4.3" style="display: none;" id="_firebugConsole"></div><body> <input id="test" value="trigger ajax start" type="button"> <div id="div1">DIV 1</div> <div id="div2">DIV 2</div> </body></html>
