JQuery mobile动态添加切换开关到listview
Posted
技术标签:
【中文标题】JQuery mobile动态添加切换开关到listview【英文标题】：JQuery mobile dynamically add toggle switch to listview 【发布时间】：2018-07-19 09:43:14 【问题描述】：我正在尝试动态地（在单击按钮时）在 Toggle 开关内添加一个新的 Listview 项，但我只得到一个 Checkbox 里面。谁能解释一下，我该怎么办？
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' charset='utf-8' content='width = device-width, initial-scale = 1'>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type = 'text/javascript'>
function test()
$('#List').append("<li><a href='#'><input data-role='flipswitch' type='checkbox'></a></li>");
$('#List').listview('refresh');
</script>
</head>
<body>
<div data-role='page' id='first'>
<div data-role='header' data-position='fixed' data-tap-toggle='false'>
<h1>First Page</h1>
</div>
<div data-role='main' class='ui-content'>
<input type='button' value='New Button' onclick=test()>
<ul data-inset='true' id='List' data-role="listview">
<li><a href='#'><input data-role='flipswitch' type='checkbox'></a></li>
<!--Here append new Toggle Switch-->
</ul>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：因为您是在所有内容都渲染后插入列表，所以您很可能必须使用 .enhanceWithin(); 来渲染新项目。方法。
function test()
$('#List').append("<li><a href='#'><input data-role='flipswitch' type='checkbox'></a></li>");
$('#List').enhanceWithin();
【讨论】：
以上是关于JQuery mobile动态添加切换开关到listview的主要内容，如果未能解决你的问题，请参考以下文章
jQuery Mobile 如何通过ajax方式动态加载页面？