The sample app
In my last post from the event driven programming with jQuery series, I simply will post a sample application. In my previous post I showed up the use case for a tab panel, which can be done typically with no custom events, and almost every developer would do it that way, but however just for the purpose of this series I’ll separate the logic into two modules. One for the tabs and one for the content. Thus you can separate the application into two simple apps into two different pages, and they will continue to work correctly.
In fact most of the large JavaScript applications use that technique and I was inspired to write these posts from one talk of Nicholas Zakas, a Yahoo! front end developer, where he uses YUI, of course. But anyway this technique can be done with everyone of the major JS libraries like jQuery.
You can see the demo and the source here.
If there are any questions about it, don’t hesitate to post your questions and I’ll be glad to help.
Related posts:
Interesting, but could you clarify this for me – finally see an implementation of a custom event. Looks like a very good technique which I will be using soon to further make my code more robust.
Iterating,on your example you should trigger the event from the origin $(this).trigger(“iwasclicked”) it will still bubble up to the document, but will keep the event.originalTarget in tact. Another benefit is that ant parent can handle the event, and stop propagation if desired. If you are triggering directly on the document, typically you wouldn’t care about the Id of the element that triggered the event