Strange link behavior

I'm basically new to jquery so I'm not sure I did the best way to do what I want...

I'd like to load content in the webpage using ajax, and making a permanent url using #! to rewrite url, it works good except for some links...

Here a short preview of the page (for the entire page/css/js HERE), links in <div id="undertop"> work good, but the others in <div id="listlabel"> didn't work, and I can't understand why...

HTML

<div id="undertop">   
      <a class="undertop" href="#!/news/Running">Home</a>
</div>
<div id="container">       
<div id="blog">
    <div class=开发者_运维技巧"post">                                       
        <a href="blablabla">Read More...</a>                                                            
    </div>
</div>         
<div id="listlabel">
        <a class="labelbox" href="#!/news/Running">Running (10)</a><br><br><br>
        <a class="labelbox" href="#!/news/Corsa">Corsa (5)</a><br><br><br>
        <a class="labelbox" href="#!/news/PC" >PC (4)</a><br><br><br>
        <a class="labelbox" href="#!/news/Altro" >Altro (2)</a><br><br><br>            
</div>

`

Jquery Script

 $(document).ready(function(){
     $(document).getUrl(window.location.hash,"#container");    

     $('a').click(
       function(){   
         alert('clicked'); //debug
          $(this).getUrl($(this).attr('href'),"#container");
       }
    );   
});

The Function getUrl

$.fn.getUrl = function(urlpass,whereadd){ 
  $(whereadd).html("<div class='ajaxloader'><img src='images/ajax-loader.gif'></div>");       
  var val=urlpass.split("#!");      
  val = val[val.length-1];      
  val = val.split("/");
  if(val[1]==null) val[1]="news";           
        $.ajax({
            url: val[1]+".php",
            type: "POST",
            data: "tag="+val[2],
            cache: false,
            success: function(html){
            $(document).find(whereadd).html(html);
      }
  });
}

Thank you in advance

From what I can tell, you're loading more HTML with those strange links into the document, but you're not calling the conversion function again.

Overall, you're approach is the complete opposite of unobtrusive JavaScript.

Right now the contents of your page are only accessible via JS. This is bad for accessibility and SEO.

Instead of loading all the content via JavaScript, you should provide plain, static pages with good old /foo/bar links. Then, in case JS is enabled, grab all the links on page-load and assign a click handler to make the contents load via AJAX.

This way you get the fancy AJAX stuff AND a decent working page in case there's no JavaScript.

I also suggest that you have a look into semantic layout.

Shameless plug
For an example of the above techniques applied, please have a look at my WIP portfolio site.