javascript - jquery ajax 从容器内的按钮加载内容

Question

我在使用 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 内)起作用吗？

Answer 1

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

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

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