jquery ajax從容器內部的按鈕加載內容

我正在使用jQuery和ajax加載頁面而無需重新加載整個網站，我遇到了問題。這是jQuery腳本：jquery ajax從容器內部的按鈕加載內容

$(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>

現在，如果我點擊「1」即是其中的Ajax內容加載它的股利外工作，但如果我點擊div中的「標題」，整個頁面被重新加載（Ajax不工作）。有可能使「標題」鏈接（這是在ajax內容加載的div內）工作？

來源

2012-10-24 Balint Bruno

這正是你如何綁定點擊處理程序？ –

實際的問題是，您正在將文件準備好的所有a[rel='tab']事件處理程序添加到事件處理程序中，但您事後才加載目標<a>。這意味着他們不會有事件處理程序綁定到他們的點擊。您應該使用類似live或更重要的是on。重要性是事件的代表團，在那裏你會使用類似：

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

這種方式，被移除或#container元素中添加任何a[rel='tab']已此事件處理程序連接到它。

來源

2012-10-24 16:38:56 Ian

它的工作。謝謝 –

將您的href屬性設置爲＃並添加一個返回false;

試試這個：

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

來源

2012-10-24 16:34:12

e.preventDefault（）;應該防止href屬性無論如何我認爲 – soupy1976

啊是的，沒有看到。我的錯。 –

@ soupy1976是的，所以'返回false;'從事件處理程序:) – Ian

我只想溝的內在聯繫，如果您已經在腳本它，而是把該URL的數據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-24 16:36:24 Throttlehead

jquery ajax從容器內部的按鈕加載內容

回答

相關問題