我正在使用ajax加载来获取页面上的某些内容。我正在使用引导程序3和引导程序切换。加载内容时，bootstrap 3内容运行良好（您可以清楚地看到面板panel- primary）。但是引导加载内容不会被加载（您只能看到一些复选框）。annyone知道如何使它正常工作吗？还是我应该注意其他一些拨动开关？如果是哪一个？
编辑：我还没有测试出事件绑定，因为我无法使引导切换CSS在Ajax加载的代码上工作。事件绑定与CSS无关吗？
<!-- jQuery --> <script src="../bower_components/jquery/dist/jquery.min.js"></script> <!-- Bootstrap Core JavaScript --> <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <!-- Bootstrap Toggle JavaScript --> <script src="../bower_components/bootstrap-toggle-master/js/bootstrap-toggle.min.js"></script> <!-- Metis Menu Plugin JavaScript --> <script src="../bower_components/metisMenu/dist/metisMenu.js"></script> <!-- Custom Theme JavaScript --> <script src="../dist/js/sb-admin-2.js"></script> <!-- Custom Domotica JavaScript --> <script> $(document).ready(function(){ // Set trigger and container variables var trigger = $('#side-menu li ul li a'), container = $('#page-wrapper'); // Fire on click trigger.on('click', function(){ // Set $this for re-use. Set target from data attribute var $this = $(this), target = $this.data('target'); alert("target: " + target) // Load target page into container container.load(target + '.html', function (response, status, xhr) {}); // Stop normal link behavior return false; }); }); </script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Home automation web page"> <meta name="author" content=""> <title>Home</title> <!-- Bootstrap Core CSS --> <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap toggle --> <link href="../bower_components/bootstrap-toggle-master/css/bootstrap-toggle.min.css" rel="stylesheet"> <!-- MetisMenu CSS --> <link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="../dist/css/sb-admin-2.css" rel="stylesheet"> <!-- Custom Fonts --> <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div id="wrapper"> <!-- Navigation --> <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">Home</a> </div> <!-- /.navbar-header --> <ul class="nav navbar-top-links navbar-right"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i> </a> <ul class="dropdown-menu dropdown-alerts"> <li> <a href="#"> <div> <i class="fa fa-comment fa-fw"></i> Failure <span class="pull-right text-muted small">No respons from Controller 1</span> </div> </a> </li> </ul> <!-- /.dropdown-alerts --> </li> <!-- /.dropdown --> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-gear fa-fw"></i> </a> <!-- /.dropdown-user --> </li> <!-- /.dropdown --> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-sign-out fa-fw"></i> </a> </li> <!-- /.dropdown --> </ul> <!-- /.navbar-top-links --> <div class="navbar-default sidebar" role="navigation"> <div class="sidebar-nav navbar-collapse"> <ul class="nav" id="side-menu"> <li> <a href="index"><i class="glyphicon glyphicon-home"></i> House<span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li> <a href="#">Weather</a> </li> <li> <a href="#">Energy</a> </li> <li> <a href="#">Water</a> </li> </ul> </li> <li> <a href="#"><i class="glyphicon glyphicon-star"></i> 1st floor<span class="fa arrow"></span></a> <ul class="nav nav-second-level" id="side-menu2"> <li> <a href="#" data-target="index">Hallway</a> </li> <li> <a href="#">Main bedroom</a> </li> </ul> <!-- /.nav-second-level --> </li> <li> <a href="#"><i class="glyphicon glyphicon-star"></i> main floor<span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li> <a href="#">Kitchen</a> </li> <li> <a href="#">Living room</a> </li> <li> <a href="#">Garage</a> </li> </ul> <!-- /.nav-second-level --> </li> <li> <a href="#"><i class="glyphicon glyphicon-star"></i> Basement</a> <!-- /.nav-second-level --> </li> <li> <a href="#"><i class="glyphicon glyphicon-tree-deciduous"></i> Garden</a> <!-- /.nav-second-level --> </li> </ul> </div> <!-- /.sidebar-collapse --> </div> <!-- /.navbar-static-side --> </nav> <div id="page-wrapper"> </div> <!-- /#page-wrapper --> </div> <!-- /#wrapper --> </body> </html> <div class="panel panel-primary" id="switchespanel"> <div class="panel-heading"> <h3 class="panel-title">Switches</h3> </div> <div class="panel-body"> <table class="table"> <tr> <th>Location</th> <th>State</th> </tr> <tr> <td>Testswitch0</td> <td> <label> <input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S0" data-size="mini"> </label> </td> </tr> </table> </div> </div>
确保正确加载bootstrap-toggle js文件和css文件。专门检查它们是否在链接指向的位置，甚至使用下面列出的CDN版本：
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet"> <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
您的路径必须是错误的，或者您忘记了完全包含js文件，并且您应该在控制台中看到关于此的警告，因为否则代码可以正常工作。
第一个元素起作用是因为在html首次加载后，会bootstrap-toggle.min.js查找具有该属性的所有元素，data- toggle="toggle"然后调用.bootstrapToggle()它们以应用插件。这仅在页面加载时发生。
bootstrap-toggle.min.js
data- toggle="toggle"
.bootstrapToggle()
如果以后添加更多切换，则需要通过自己进行初始化.bootstrapToggle()。我更新了下面的示例，以模拟动态添加切换，并说明我将采用的方法。有关更多详细信息，请参见代码中的注释。
// timeout to simulate ajax setTimeout(function(){ // add an element dynamically, $('.table').append('<tr><td>Testswitch0</td><td><label><input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S2" data-size="mini"></label></td></tr>'); // now that we have dynamically loaded elements // we need to initialize any toggles that were added // you shouldn't re-initialize any toggles already present // but we also do want to have to figure out how to find the ones we added // instead, we'll destroy all toggles and recreate all new ones $("[data-toggle='toggle']").bootstrapToggle('destroy') $("[data-toggle='toggle']").bootstrapToggle(); }, 2000) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script> <div class="panel panel-primary" id="switchespanel"> <div class="panel-heading"> <h3 class="panel-title">Switches</h3> </div> <div class="panel-body"> <table class="table"> <tr> <th>Location</th> <th>State</th> </tr> <tr> <td>Testswitch0</td> <td><label> <input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S0" data-size="mini"> </label></td> </tr> <tr> <td>Testswitch0</td> <td><label> <input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S1" data-size="mini"> </label></td> </tr> </table> </div> </div>
