Question

我的 header.php 包含一个触发侧边栏菜单的按钮。按钮和侧边栏仅对已登录用户可见。在这个块的末尾，有一小段代码可以添加类＆＃34; active＆＃34;到我的侧边栏让它可见。它类似于：

<div id="header">
<!-- if is_user_logged_in -->
<a id="menu-toggle" href="#" type="button">
  <i class="sprite-t-toggle-side"></i>
</a>
<!-- sidebar menu-->
<div id="sidebar-wrapper"><!-- menu content --></div>
<script>
   var $menu = $("#sidebar-wrapper");
   $("#menu-toggle").on("click", function(e) {
     e.preventDefault(), 
     $menu.toggleClass("active");
   });
</script>
</div>

现在，我让我的用户通过AJAX登录，一旦他们重新登录，我只需刷新我的标题栏以显示按钮和侧边栏。我使用这行代码在我的AJAX成功中这样做：

success: function(data){
              if (data.loggedin == true){
              $("#header").load(location.href + " #header");
  }
}

直到这里一切正常，用户被记录并且按钮显示但是当我点击它时没有任何反应。补充工具栏不会出现，如果我查看代码，我的小函数会在标题的末尾丢失。否则，如果我重新加载整个页面就可以了。发生了什么？我做错了什么？

Answer 1

为什么要重新加载整个标头。为什么不抓住登录的部分

我认为问题在于您正在重新加载整个#header，只需重新加载其中一部分。

$("#header").load(location.href + " #header");＆lt; - 这将取代所有的html #header

<div id="header">
<div id="loadajax"></div> <!-- Put loaded ajax in here --->
<!-- if is_user_logged_in -->
<a id="menu-toggle" href="#" type="button">
  <i class="sprite-t-toggle-side"></i>
</a>
<!-- sidebar menu-->
<div id="sidebar-wrapper"><!-- menu content --></div>
<script>
function runMenu() {
   var $menu = $("#sidebar-wrapper");
   $("#menu-toggle").on("click", function(e) {
     e.preventDefault(), 
     $menu.toggleClass("active");
   });
}
runMenu();
</script>
</div>

success: function(data){
   if (data.loggedin == true){
      $("#loadajax").load(location.href + " #header");
      runMenu();
  }
}

通过Ajax正确重新加载div - 脚本消失

1 个答案: