我想在帶有 bootstrap 4 儀表板的 adminlte 3 儀表板中使用 AJAX 從資料庫中繪制動態側邊欄選單資料。當我使用 AJAX 動態加載側邊欄選單資料時，側邊欄打開或折疊不起作用。我的 JSFiddle URL 如下所示。當靜態資料推送到沒有 ajax 的 '.sidebar' 類時，選單打開/隱藏作業。但是使用 ajax 呼叫選單打開/隱藏不起作用。
$(document).ready(function(){
var url = "";
$.ajax({
url: url,
}).done(function(resp){
//retrive data
var ret = '<nav ><ul data-widget="treeview" role="menu" data-accordion="true"><li ><a href="#" ><i ></i><p>Admin<i ></i></p></a><ul ><li ><a href="#add-order.php" ><i ></i><p>Rahim</p></a></li></ul><ul ><li ><a href="#" ><i ></i><p>Test</p></a></li></ul></li></ul></nav>';
$('.sidebar').html(ret);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="sidebar-mini sidebar-closed sidebar-collapse" style="height: auto;">
<!-- Site wrapper -->
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-primary navbar-dark">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<!--
<li >
<a href="#" >Home</a>
</li>
<li >
<a href="#" >Contact</a>
</li>
-->
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
<img src="public/images/login_man.png" class="user-image img-circle elevation-2" alt="User Image">
<span class="d-none d-md-inline">admin</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<!-- Menu Footer-->
<li class="user-footer">
<!--<a href="#" >Profile</a>-->
<a href="logout.php" class="btn btn-danger btn-flat float-right">Sign out</a>
</li>
</ul>
</li>
<!--
<li >
<a data-widget="fullscreen" href="#" role="button">
<i ></i>
</a>
</li>
<li >
<a data-widget="control-sidebar" data-slide="true" href="#" role="button">
<i ></i>
</a>
</li>
-->
</ul>
</nav>
<!-- /.navbar --><aside class="main-sidebar main-sidebar-custom sidebar-dark-primary elevation-4">
<a href="#" class="brand-link">
<i class="brand-image fas fa-tachometer-alt" style="opacity: .8"></i>
<span class="brand-text font-weight-light">Dashboard</span>
</a>
<div class="sidebar">
</div>
</aside>
<div class="container-fluid">
<div class="content-wrapper" style="min-height: 549px;">
</div>
</div>
</div>
</body>uj5u.com熱心網友回復：
只需將代碼放在成功功能之后，它就會起作用。
$('[data-widget="treeview"]').Treeview('init');
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/367745.html
標籤：javascript 阿贾克斯 bootstrap-4 管理