AJAX lädt Inhalt zweimal

Question

Ich versuche, eine Sidebar-Navigation zu erstellen, die AJAX verwendet, um Inhalt in einem div zu laden. Bis jetzt funktioniert es großartig, es ist nur, dass ich bemerkt habe, dass jedes Mal, wenn ich auf die Schaltflächen klicke, um zu einer anderen Seite auf meiner Seite zu navigieren, der Inhalt der Seite über den aktuellen Inhalt geladen wird.

Ich habe diese Hypothese, weil auf jeder Website meine Website sendet eine Anfrage an einen Server, um Daten von dort zu bekommen.

Jetzt, wenn ich die Seite auf meiner Seite bereits besucht habe, die diese Anfrage sendet, zu einer anderen Seite auf meiner Seite navigieren und zurück zur ersten Seite navigieren, sendet diese Seite zwei Anfragen an den Server. Dies ist der Code meiner Navigationsleiste Wenn ich diese Schritte bin zu wiederholen, es kommt noch hinzu, und die Anfrage wird 3,4,5..times

gesendet:

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

Die Funktionen Fernbedienung() Blick/Gruppen()/Geräte() in etwa gleich:

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

showSubpage() sieht wie folgt aus:

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

} 

Main ist nur ein normaler div:

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

Hat jemand eine Idee, warum meine Seite nicht nur ein einziges Mal aufgerufen Jedesmal, wenn ich auf die Links klicken?

Bearbeiten: Wenn ich in den Quellcode meiner Seite schaue, wird der Inhalt nur einmal aufgeführt.

Edit2: Ich dachte, dass das Problem nicht von der Ajax selbst kommt. Dies ist der PHP-Code, mit dem ich meine Seite erstelle.

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>'); 

} 

Mein Code erstellt eine Schaltfläche für jedes "Gerät", das in der "Devicearr" ist. Aber wenn meine Seite zweimal aufgerufen wurde und ich einmal auf die Schaltfläche klicke, werden zwei Klickereignisse registriert.

Answer 1

Statt:

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

I verwendet:

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

}); 

so dass das Click-Ereignis nicht am Leben bleibt nach dem Ajax-Inhalt neu zu laden.

Zusätzlich (nicht unbedingt erforderlich), i unbind auch das Click-Ereignis, bevor ich das Click-Ereignis registrieren:

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

Dank Barmar für den Hinweis.