2016-06-23 230 views
-1

我想建立一個側邊欄導航,即使用AJAX來加載一個div裏面的內容。 到目前爲止,它工作得很好,只是我注意到,每次點擊按鈕導航到我的頁面上的其他網站時,網站內容似乎都會加載到當前內容的頂部。AJAX加載內容兩次

我有這個假說,因爲每個站點載入我的網站發送一個請求到服務器,從那裏得到的數據。現在

如果我已經訪問過該網站我的網頁,發送該請求上,瀏覽到我的網頁上不同的網站,然後返回到第一個站點,該站點將兩個請求到服務器。 如果我重複這些步驟,它只是增加了起來,請求被髮送3,4,5..times

這是我的導航欄的代碼:遠程

<div id="sidedrawer" class="mui--no-user-select"> 
    <div class="mui-divider"></div> 
    <ul> 
    <li onClick="remote();" href="./#remote"> 
     <strong><a href="./#remote" class="navbarlink">Remote</a></strong> 
    </li> 
    <li onClick="groups();" href="./#groups"> 
     <strong><a href="./#groups" class="navbarlink">Groups</a></strong> 
    </li> 
    <li onClick="devices();" href="./#devices"> 
     <strong><a href="./#devices" class="navbarlink">Devices</a></strong> 
    </li> 
    <li onClick="users();" href="./#users"> 
     <strong><a href="./#users" class="navbarlink">Users</a></strong> 
    </li> 
    <li onClick="programs();" href="./#programs"> 
     <strong><a href="./#programs" class="navbarlink">Programs</a></strong> 
    </li> 
    <li onClick="settings();" href="./#settings"> 
     <strong><a href="./#settings" class="navbarlink">Settings</a></strong> 
    </li> 
    </ul> 
</div> 

功能() /組()/設備()看起來差不多的:

function remote() { 
      showSubPage("Remote", "./remote.php"); 
     } 

showSubpage()看起來是這樣的:

function showSubPage(title, page){ 
    changeTabName(title); 
    $.ajax({ 
     url: page, 
     type: "GET", 
     cache: false, 
     success:function(data){ 
           var $main = $('#main'); 
           $main.html(''); 
           $main.html(data);        
           } 
    }); 

} 

主要是隻是一個普通的div:

<div id="main"></div> 

有沒有人有一個想法,爲什麼我的網頁不會被調用一次就好,每次我點擊的鏈接?

編輯: 當我尋找到我的網頁的源代碼,內容僅列出一次。

EDIT2:我想,這個問題並非來自阿賈克斯本身。 這是我用來生成我的頁面的PHP代碼。

function addGroup($groupId, $groupname, $devicearr) 
    { 
    echo('<div class="group"> 
      <h3>'.$groupname); 
     echo('<div class="verticalcenter"><div class="toggle-button toggle-button-selected " id="groupButton'.$groupId.'"><button></button></div></div>'); 
    echo('  </h3> 
      <div> 
       <table class="devicetable"> 
        '); 

        foreach ($devicearr as &$device) { 
         echo('<tr> 
           <td>'.$device['name'].'</td>'); 
         if($device['status'] == 1){ 
          echo('<td class="togglecolumn"><div class="verticalcenter" ><div class="toggle-button toggle-button-selected group'.$groupId.' device'.$device['id'].'" id="group'.$groupId.'device'.$device['id'].'" ><button></button></div></div></td></tr>'); 
         } else { 
          echo('<td class="togglecolumn"><div class="verticalcenter"><div class="toggle-button group'.$groupId.' device'.$device['id'].'" id="group'.$groupId.'device'.$device['id'].'"><button></button></div></div></td></tr>'); 
         } 
         echo ('<script> 
             $(document).on("click","#group'.$groupId.'device'.$device['id'].'", function() { 
              if($("#group'.$groupId.'device'.$device['id'].'").hasClass("toggle-button-selected")){ 
               $(".device'.$device['id'].'").removeClass("toggle-button-selected"); 
                var frame = document.createElement("iframe"); 
                frame.src = "http://localhost/callMethod"; 
                frame.style.left = "-9999px"; 
                frame.style.display = "none"; 
                frame.onload = function() { 
                 this.parentNode.removeChild(this);  
                }; 
                document.body.appendChild(frame); 

              } 
              else{ 
               $(".device'.$device['id'].'").addClass("toggle-button-selected"); 
               var frame = document.createElement("iframe"); 
               frame.src = "http://localhost/callMethod"; 
               frame.style.left = "-9999px"; 
               frame.style.display = "none"; 
               frame.onload = function() { 
                this.parentNode.removeChild(this);  
               }; 
               document.body.appendChild(frame); 
              }    
             }); 

            </script>'); 
        } 
    echo(' 
       </table> 
      </div> 
      </div>'); 

} 

我的代碼爲「devicearr」中的每個「設備」創建一個按鈕。但是當我的頁面被調用了兩次,並且我點擊了一次按鈕,它就註冊了兩個點擊事件。

+1

數據中返回的內容的示例? – Gary

+1

從你已經顯示的點擊處理程序應該(並且)只執行一次:https://jsfiddle.net/RoryMcCrossan/1hesztbt/。我們需要看到一個能夠幫助你的問題的工作示例 –

+1

爲什麼不'$ main.load(page,callback)'? – Dimava

回答

0

相反的:

$(document).on("click","#group'.$groupId.'device'.$device['id'].'", function() { 
}); 

我用:

$("#group'.$groupId.'device'.$device['id'].'").click(function() { 

}); 

,使得點擊,事件不會重裝Ajax內容後活路。

另外(不是必需的),我也取消綁定點擊事件,在我註冊點擊的事件與:

$("#group'.$groupId.'device'.$device['id'].'").off("click"); 

感謝Barmar的提示。