javascript - 奇怪的链接行为

Question

我基本上是 jquery 的新手，所以我不确定我做了我想做的最好的方法......

我想使用 ajax 在网页中加载内容，并使用 #! 创建永久 url重写 url，除了一些链接外，它工作正常......

这里是页面的简短预览(整个页面/css/js HERE )，链接在 <div id="undertop"> 中工作不错，但其他人在<div id="listlabel">没有用，我不明白为什么...

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 脚本

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

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

函数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);
      }
  });
}

提前致谢

Answer 1

据我所知，您正在将更多带有这些奇怪链接的 HTML 加载到文档中，但您没有再次调用转换函数。

总体而言，您的方法与unobtrusive JavaScript 的完全相反 .

现在您的页面内容只能通过 JS 访问。这不利于可访问性和 SEO。

不是通过 JavaScript 加载所有内容，您应该提供带有良好的旧 /foo/bar 链接的普通静态页面。然后，如果启用了 JS，则在页面加载时获取所有链接并分配点击处理程序以通过 AJAX 加载内容。

如果没有 JavaScript，您可以通过这种方式获得精美的 AJAX 内容和一个不错的工作页面。

我还建议您查看 semantic layout .

不要脸的外挂
有关应用上述技术的示例，请查看我的 WIP portfolio site .