Hi,
the last two days i argue about how to handle (re)binding event
handlers in a most elegant and un-redundant way when i work with
asynchron injected files. I worked with prototype/Behaviour for the
last couple of month, so i need a good approach to refactor this
within jquery.
So far a defined a function that is used as a callback on .load()
functions which load xhr injected files. Within this function
(rebindEventHandlers) i define every function that is in use within
the injected files (s. appended Example below).
First problem is: I don't want to traverse everytime through all
functions defined within this rebindEventHandlers callback, because
there is possibly no need for all(!) functions to rebind in some
case. Of course this could be avoided by defining more callback
functions that each only contains the needed functions to rebind and
use these func. as separat callbacks. But i think thats ugly...
Second problem is: Sometimes (for example the choosen .toogle()
functionality, s. below the example code) i'd like to avoid to define
2 functions for overall 1 functionality. Thats ugly too ;)
How do you handle this task? I appreciate any comments. Thx in advance.
greets
Olaf
EXAMPLE (structure):
$(function(){
var rebindEventHandlers = function() {
// example func to toggle some xhr loaded content
$("a.toggleBelowLoadedContent").toggle(function(){
var el = $(this).parent();
$(el).next().fadeOut("fast");
$(this).text('Show');
return false;
}, function() {
var el = $(this).parent();
$(el).next().fadeIn("fast");
$(this).text('Hide');
});
};
// EOF rebindEventHandlers
// func outside the defined callback func
// loads the xhr file which contains the above toogle functionality
// present the rebindEventHandlers as the callback
$("a#client").click(function(){
$("div#account").load("/clients/dashboard/client/",
rebindEventHandlers);
});
// example func to toggle some content on normal loaded sites
// See "Second problem"...
$("a.toggleBelow").toggle(function(){
var el = $(this).parent();
$(el).next().fadeOut("fast");
$(this).text('Show');
return false;
}, function() {
var el = $(this).parent();
$(el).next().fadeIn("fast");
$(this).text('Hide');
});
};
// EOF document.ready()
