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?