I have a page which contains several divs (each with a unique ID and the same class, 'parent'). Underneath each "parent" div, is a div with class "child" and unique ID name -child. This DIV is upon page load empty.
Whenever you click on a parent DIV, the following code is executed.
$$('div.parent').each(function(s){
$(s).observe('click', function(event){
event.stop();
var filer = $(s).readAttribute('filer');
var currentElement = $(s).id;
var childElement = currentElement + '-children';
new Ajax.Updater ({success: childElement}, root + '/filers/interfacechildren', {
parameters: {parentId: currentElement, filer: filer}
});
});
});
Of course, it's possible that a child node is again a parent ont its own. The response looks like this (Smarty with
Zend Framework):
{foreach from=$ifaces item=interface}
<div id="{$interface->name}" filer="{$interface->system_id}" class="parent">{$interface->name}</div>
<div id="{$interface->name}-children" class="child"></div>
{/foreach}
Whenever I click on a "parent" div that is loaded inside a child, nothing happens :( Any suggestions / fixes how to fix this?
