2

我正在使用 jQuery 和 ajax 加载页面而无需重新加载整个网站，我遇到了问题。这是jQuery脚本：

$(function(){
$("a[rel='tab']").click(function(e){
    e.preventDefault(); 

    //get the link location that was clicked
    pageurl = $(this).attr('href');

    //to get the ajax content and display in div with id 'content'
    if(pageurl!=window.location){
    $.ajax({url:pageurl+'?rel=tab',success: function(data){
        $('#main-wrap').html(data);
    }});
    }
    //to change the browser URL to 'pageurl'
    if(pageurl!=window.location){
        window.history.pushState({path:pageurl},'',pageurl);    
    }
    return false;  
   });
     });

   /* the below code is to override back button to get the ajax content without reload*/
      $(window).bind('popstate', function() {
$.ajax({url:location.pathname+'?rel=tab',success: function(data){
    $('#main-wrap').html(data);
}});
});

html代码是这样的：

<div class="nav"><a href="example1.html" rel="tab">Page 1</a></div>
<div class="ajax-content">
<div class="title"><a href="title_page.html" rel="tab">Title</a></div>
</div>

现在，如果我单击加载 ajax 内容的 div 之外的“第 1 页”，它正在工作，但是如果我单击 div 内的“标题”，则重新加载整个页面（ajax 不工作）。是否可以使“标题”链接（位于加载 ajax 内容的 div 内）工作？

4

3 回答 3

0

将您的 href 属性设置为 # 并添加 return false;

试试这个：

<div class="title"><a href="#" rel="tab" onclick="return false;">Title</a></div>
于 2012-10-24T16:34:12.550 回答
0

如果您已经在编写脚本，我只会放弃内部链接，而是将 url 放在 data-url 属性中。这样您就不必担心使用任何默认行为覆盖您的曲目。你的 div 看起来像这样：

<div class="title" id='link_btn' data-url="title_page.html">Title</div>

然后像这样重写你的代码：

("#link_btn").click(function(){  

    //get the link location that was clicked
    pageurl = $(this).attr('data-url');

数据属性是在元素和脚本之间传递数据的好方法。当你创建它们时你必须小心，因为特殊字符和引号会弄乱它们并使它们不可读。

于 2012-10-24T16:36:24.153 回答
0

实际的问题是您正在将事件处理程序添加到所有a[rel='tab']准备好的文档中，但是您是在<a>事后加载目标。这意味着他们不会将事件处理程序绑定到他们的点击。你应该使用类似live或更重要的东西on。重要的是事件委托，您可以在其中使用以下内容：

$("#container").on("click", "a[rel='tab']", function () {
    // Your code
});

这样，a[rel='tab']在元素内部删除或添加的任何内容都会附加#container此事件处理程序。

于 2012-10-24T16:38:56.333 回答