AJAX加载内容两次

-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”中的每个“设备”创建一个按钮。但是当我的页面被调用了两次，并且我点击了一次按钮，它就注册了两个点击事件。

来源

2016-06-23 Fynn

数据中返回的内容的示例？ – Gary

从你已经显示的点击处理程序应该（并且）只执行一次：https：//jsfiddle.net/RoryMcCrossan/1hesztbt/。我们需要看到一个能够帮助你的问题的工作示例 –

为什么不'$ main.load（page，callback）'？ – Dimava

相反的：

$(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的提示。

来源

2016-06-23 18:06:17 Fynn

AJAX加载内容两次

回答

相关问题