jquery ajax 从容器内的按钮加载内容答案

【问题标题】：jquery ajax load content from a button that is inside the containerjquery ajax 从容器内的按钮加载内容
【发布时间】：2012-10-24 16:30:54
【问题描述】：

我正在使用 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 内）工作？

【问题讨论】：

这正是您绑定点击处理程序的方式吗？

标签： javascript jquery html

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

将你的href属性设置为#并添加一个return false；

试试这个：

<div class="title"><a href="#" rel="tab" onclick="return false;">Title</a></div>

【讨论】：

e.preventDefault();我认为应该阻止 href 属性做任何事情
啊，是的，没看到。我的错。
@soupy1976 是的，来自事件处理程序的return false; 也是如此:)

【解决方案3】：

如果您已经在编写脚本，我会放弃内部链接，而是将 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');

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

【讨论】：