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