Problemas com HREF/Links no AJAX

[PanicoLima]

Olá pessoal. Estou passando por alguns problemas que acredito que mesmo para vocês não fazem o menor sentindo - ou não.

Tenho as seguintes páginas index.php e pagina2.php:

index.php

<script type="text/javascript">  
$(document).ready(function(){  
    var content = $('#content');  

    // Pre carregando o GIF  
    loading = new Image(); loading.src = 'loading.gif';  
    $('a').live('click', function( e ){  
        e.preventDefault();  
        content.html('<img src="loading.gif" />');  

        var href = $(this).attr('href');  
        $.ajax({  
            url: 'pagina2.php?url='+href,
            type: 'GET',
            cache: false,
            dataType: 'html',
            success: function( response ){  
                // Forçando o parser  
                var response = $( '<div>'+response+'</div>' ); 
                var data = response.find('#content').html();
          
                // Apenas atrasando a troca, para mostrarmos o loading  
                window.setTimeout( function(){  
                    content.fadeOut('fast', function() {  
                        content.html(data).fadeIn();  
                          
                        var title = response.find('#title').text();  
                        window.history.pushState('', title, href);  
                        document.title = title;
                    });  
                }, 100 );
            }  
        });
    });  
});  
</script>  

<div id="content">
<?php
include "pagina2.php";
?>
</div>

pagina2.php

<?php
if(isset($_GET['url']) == 0) {$_GET['url'] = "/principal1";}

if($_GET['url'] == "/principal1") {echo "<div id=\"title\">1</div><div id=\"content\"><a href=\"/principal2\">PRINCIPAL 2</a></div>";}

if($_GET['url'] == "/principal2") {echo "<div id=\"title\">2</div><div id=\"content\"><a href=\"/principal3\">PRINCIPAL 3</a></div>";}

if($_GET['url'] == "/principal3") {echo "<div id=\"title\">3</div><div id=\"content\"><a href=\"/principal1\">PRINCIPAL 1</a></div>";}
?>

As quais estão funcionando perfeitamente, quando abro index.php, carrega os dados equivalentes a url /principal1 da pagina2.php normalmente, e quando vou clicando em seus links as páginas vão se alternando perfeitamente sem erros. O problema acontece quando eu ponho uma barra nesses endereços. Por exemplo, deixando a pagina2.php da seguinte maneira:

<?php
if(isset($_GET['url']) == 0) {$_GET['url'] = "/principal/1";}

if($_GET['url'] == "/principal/1") {echo "<div id=\"title\">1</div><div id=\"content\"><a href=\"/principal/2\">PRINCIPAL 2</a></div>";}

if($_GET['url'] == "/principal/2") {echo "<div id=\"title\">2</div><div id=\"content\"><a href=\"/principal/3\">PRINCIPAL 3</a></div>";}

if($_GET['url'] == "/principal/3") {echo "<div id=\"title\">3</div><div id=\"content\"><a href=\"/principal/1\">PRINCIPAL 1</a></div>";}
?>

Ao acessar a index.php, carrega os dados equivalentes a url /principal/1 (com a barra) da pagina2.php normalmente e ao clicar no link que aparece da mesma - PRINCIPAL 2 - a página que carrega passa a não funcionar mais corretamente, pois o link que aparece - PRINCIPAL 3 - já não carrega mais nada, nem mesmo aparece a imagem loading.gif que deveria.

Acredito ter sido claro quanto ao meu problema, mas se não fui, peço que façam o teste com os arquivos em localhost seguindo os passos para que possam constatar o que estou passando. Agradeço a compreensão e o esforço para entender.