Ajax加载后，引导程序切换不起作用
梁丘远航
问题内容：
问题答案：
我正在使用ajax加载来获取页面上的某些内容。我正在使用引导程序3和引导程序切换。加载内容时，bootstrap
3内容运行良好（您可以清楚地看到面板panel-
primary）。但是引导加载内容不会被加载（您只能看到一些复选框）。annyone知道如何使它正常工作吗？还是我应该注意其他一些拨动开关？如果是哪一个？
编辑：我还没有测试出事件绑定，因为我无法使引导切换CSS在Ajax加载的代码上工作。事件绑定与CSS无关吗？
- 主要html代码使用的脚本（带有ajax加载的脚本）
- 主要的html代码
- 主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>
问题答案：
确保正确加载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()它们以应用插件。这仅在页面加载时发生。
如果以后添加更多切换，则需要通过自己进行初始化.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>
类似资料：
-
问题内容： 在此页面上，我有一个jQuery弹出窗口和可调整大小的缩略图。如果我将鼠标悬停在缩略图上，则图像的大小将完美调整。另外，当我单击页脚中的黄色大电视按钮“ QuickBook TV”时，弹出窗口会按照我的意愿完美显示。 但是，当我单击“下一步”或“上一步”按钮时，将使用AJAX加载新内容，而jQuery不再对弹出窗口或缩略图起作用。我搜索了许多论坛来寻找有关此问题的信息，但是由于对jQu
-
问题内容： 我在win10-64上重新安装了Python37-32，似乎满足了所有要求，并且我的hello world python文件正在执行 但是当我尝试使用pyinstaller时 它以错误结束 这是Windows上的基本安装，我不必手动重新编译任何引导加载程序（我习惯于使用较旧的python版本进行pyinstaller，并且从未遇到过问题）。我应该在哪里解决这个问题？ 编辑 错误显示在p
-
问题内容： 我正在尝试使用AJAX创建一个页面，但是当我获得该页面并且它包含Javascript代码时，它不会执行。 为什么？ 我的ajax页面中的简单代码： …并且它不执行它。我正在尝试使用Google Maps API并通过AJAX添加标记，因此，每添加一个标记，我都会执行一个AJAX页面，该页面将获取新标记，并将其存储在数据库中，并应将标记“动态”添加到地图中。 但是，由于我无法以这种方式执
-
我洛基，在“开始”之后，我遵循https://getbootstrap.com/docs/4.3/layout/overview/的指示（我猜在那个例子中缺少了一些东西） 我说： 链接到头标签中的css文件 但是它不起作用，类“hid-ph-flex”总是在“代码”显示中：无“代码”，火狐调试器警告说：“未知规则或错误读取规则在“包括” 我想我忘了一份文件，有什么帮助吗？？？
-
我遇到了一个问题，从带有angular2的Spring boot加载文件。 这是我在spring boot的代码，它来自:使用spring MVC返回生成的pdf。我可以用postman直接下载文件，但不能用angular2... Angular2服务 和下载按钮 当我点击下载按钮chrome打开新标签并立即关闭它不显示任何文件。以下是Postman的一些响应标题。
-
问题内容： 我将datepicker附加到全局脚本文件中的输入中，如下所示： 在特定页面上，模态对话框（还有jquery ui）中有输入（将与datepicker一起使用），我通过$ .load（）调用该页面并注入其他页面的div中。 上面的代码对于其他页面中的静态输入非常有效，但对于上面的scenerio，它显示的是datepicker对话框很好，但是当我单击一个日期时，它会抛出错误（f未定义）