Im using event handlers from a framework (prototype to be specific) to attach listeners to certain elements of a page like this:
//html
<a href="?default=1" class="default">Set Default</a>
//js
document.observe('dom:loaded', function(){
//get all elements with d 'default' classname
for(i = 0;i < document.getElementsByClassName('default').length;i++)
{
s = document.getElementsByClassName('default')[i];
//attach an onclick event
s.observe('click', function(e){
//prevent the default action (i.e following the link)
e.preventDefault();
//read d link attribute
ref = this.readAttribute('href');
//and now, do it the ajax way
new Ajax.Request('js/ajax/handler.php'+ref, {
method:'get',
onSuccess:function(transport){}
});
});
}
});
It works well. Really well. But there is a challenge. Most times, such actions manipulates the DOM and may add one or more of the '
default' class element (i.e another <a href="?default=1" class="default">Set Default</a> somewhere). That is intentional actually. But then, the newly added '
default' class element will not have the click event attached. The shitty work around at the moment is to loop through all the 'default' classes again and re-attach the events. Any other better ideas?