ajax加载后引导切换不起作用
[英]bootstrap toggle doesn't work after ajax load
问题描述
i'm using ajax load to get some content on my page.
我正在使用 ajax 加载在我的页面上获取一些内容。 I'm working with bootstrap 3 and bootstrap toggle.我正在使用引导程序 3 和引导程序切换。 when the content is loaded the bootstrap 3 content works fine (you can clearly see the panel panel-primary).加载内容后，bootstrap 3 内容工作正常（您可以清楚地看到面板 panel-primary）。 But the bootstrap toggle content doesn't get loaded (you can just see some checkboxes).但是引导程序切换内容不会加载（您只能看到一些复选框）。 Does annyone know how to get this working? annyone 知道如何让这个工作吗？ Or should i look out to some other toggle switches?或者我应该注意其他一些拨动开关？ Ifso which ones?如果是哪些？
EDIT: i haven't tested out event binding yet because i cant get the bootstrap toggle css to work on the ajax loaded code.编辑：我还没有测试事件绑定，因为我无法让引导程序切换 css 处理 ajax 加载的代码。 Event binding has nothing to do with the css right?事件绑定与 css 无关吧？
- Scripts used by the main html code (the one with ajax load)主要 html 代码使用的脚本（带有 ajax 加载的代码）
- Main html code主要的html代码
- code being loaded into a div by the main html code代码被主 html 代码加载到 div 中
<!-- 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>
2 个解决方案
解决方案1
13 已采纳 2015-09-15 14:10:56
Make sure that you are loading both the bootstrap-toggle js file and css file properly.确保正确加载了 bootstrap-toggle js 文件和 css 文件。 Specifically check that they are in the location your links point to, or even use the cdn versions listed below:特别检查它们是否在您的链接指向的位置，或者甚至使用下面列出的 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>
Your paths must be wrong or you forgot to include the js file altogether, and you should see a warning about this in your console because otherwise the code works fine.您的路径一定是错误的，或者您忘记完全包含 js 文件，您应该在控制台中看到有关此的警告，否则代码可以正常工作。
Regarding dynamically loaded content.关于动态加载的内容。
The first elements work because, after the html first loads, bootstrap-toggle.min.js looks for any elements that have the attribute data-toggle="toggle" and calls .bootstrapToggle() on them applying the plugin.第一个元素起作用，因为在 html 首次加载后， bootstrap-toggle.min.js查找具有属性data-toggle="toggle"任何元素，并在它们上调用.bootstrapToggle()应用插件。 This only happens when the page loads.这仅在页面加载时发生。
If you later add more toggles, you'll need to initialize them yourself via .bootstrapToggle() .如果您稍后添加更多切换，则需要通过.bootstrapToggle()自己初始化它们。 Iv'e updated the example below to simulate adding toggles dynamically and explain the approach I would take to do that.我更新了下面的示例以模拟动态添加切换并解释我将采取的方法。 See the comments in the code for more details.有关更多详细信息，请参阅代码中的注释。
// 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>
解决方案2
3 2020-04-10 19:27:15
The best solution that worked:有效的最佳解决方案：
1- Load Jquery before bootstrap. 1- 在引导之前加载 Jquery。 Here Jquery first, Ajax second and bootstrap in the end.这里首先是 Jquery，其次是 Ajax，最后是引导程序。
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
2- Call bootstrapToggle on ajax complete: 2- 在 ajax 上调用 bootstrapToggle 完成：
$(document).ajaxComplete(function() {
$('input[type=checkbox][data-toggle^=toggle]').bootstrapToggle();
});
3- Note: Call your custom script jquery at the end 3- 注意：最后调用您的自定义脚本 jquery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.