Question

我正在尝试构建一个侧边栏导航，它使用AJAX加载div中的内容。到目前为止它工作得很好，只是我注意到，每当我点击按钮导航到我页面上的不同站点时，网站内容似乎都会加载到当前内容之上。

我有这个假设，因为在每个站点加载我的站点向服务器发送一个请求，从那里获取数据。

现在，如果我已经访问了我的页面上的站点，它发送了此请求，导航到我页面上的其他站点并导航回第一个站点，该站点向服务器发送两个请求。如果我重复这些步骤，它只会加起来并且请求被发送3,4,5次

这是导航栏的代码：

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

函数remote（）/ groups（）/ devices（）看起来大致相同：

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

}

Main只是一个普通的div：

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

有没有人知道为什么每次点击链接时我的页面都不会被调用一次？

编辑：当我查看我的页面的源代码时，内容只列出一次。

Edit2：我认为问题不是来自ajax本身。这是我用来生成页面的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”中的每个“设备”创建一个按钮。但是当我的页面被调用两次并且我单击按钮一次时，它会注册两个单击事件。

Answer 1

而不是：

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

我用过：

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

});

以便在重新加载ajax内容后，Click-Event不会保持活动状态。

此外（不一定需要），我在点击事件之前取消绑定点击事件：

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

感谢Barmar提示。

AJAX加载内容两次

1 个答案: