Salve salve galera !!

Bom, eu já havia postado como carregar conteudo com ajax, apenas com javascript puro.

Porém, se junto com o xmlHttp.responseText, vierem alguns links, eles não terão o evento onclick, atrelados. Pois nós fizemos o ‘bind’ da function no window.onload, e nossos novos elementos foram trazidos muito depois desse instante.

Para entendimento, rode esse script isoladamente:

<html>
<head>
  <script type="text/javascript">
  window.onload = function(){
    id('teste').innerHTML = '<span id="ae">aeee</span>';

    attach( id('ae'), teste );
  }

  function attach( el, f ){
    if( window.addEventListener )
      el.addEventListener("click", f, false);
    else
      el.attachEvent("click", f );
  }
  function id( el ){
    return document.getElementById( el );
  }
  function teste(){
    alert( 'ae' );
  }
  </script>
</head>
<body>
  <div id="teste"></div>
</body>
</html>

Entendeu oque fizemos ?

Criamos uma tag dentro da div#teste com javascript. E logo depois de criar, nos fizemos o bind do evento.

Precisaremos do mesmo para ‘dar vida’ aos nossos novos elementos que trouxemos com ajax.

var as = id('content').getElementsByTagName('a');
      for( var i=0; i<as.length; i++ ){
        var arq = pega_arq( as[i].href );
        if( window.addEventListener )
          as[i].addEventListener( 'click', function(){ abre( arq ); }, false );
        else
          as[i].attachEvent( 'click', function(){ abre( arq ); } );
      }

Note que primeiro guardamos apenas os nossos ‘novos links’ (os que estiverem dentro da div#content), na variavel as.

depois com um loop for(), iteramos por essas tags , e vamos uma a uma, adicionando no evento onclick a function abre(), responsável pela requisição ajax.

as[i].addEventListener( 'click', function(){ abre( arq ); }, false );

Aqui, usamos uma function anônima, pois queremos que a arq() só seja executada, no evento onclick.

Demonstração Online