动态创建 div 元素（jQuery 移动页面）
Posted
技术标签:
【中文标题】动态创建 div 元素（jQuery 移动页面）【英文标题】：Create div-element (jQuery mobile pages) dynamically 【发布时间】：2018-01-07 00:53:26 【问题描述】：当我尝试在 jquery 中动态添加数据角色 div 元素时，它会失败 - 它会显示但不再格式化。在 html 文件中，您可以看到我将创建的 div 元素放在哪里。
出了什么问题，我怎样才能让它工作？
htlm 文件
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5 /jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script>
<script src="my_js.js"></script>
</head>
<body>
<!-- jquery mobile-pages does not work here-->
<div id="mydiv">
</div>
<!-- this works just fine -->
<div data-role="collapsible">
<h4>B</h4>
<ul data-role="listview">
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
</ul>
</div>
</body>
</html>
jquery
var string = "" +
"<div data-role='collapsible'>" +
"<h4>B</h4>" +
"<ul data-role='listview'>" +
"<li><a href='#'>Billy</a></li>" +
"<li><a href='#'>Bob</a></li>" +
"</ul>" +
"</div>";
console.log(string);
$(string).appendTo("#mydiv");
图片的上半部分是动态创建的，下半部分是我把代码放在html文件中的样子。在右边你可以看到我附加到 div 的字符串
【问题讨论】：
【参考方案1】：动态添加时必须绑定可折叠元素。
喜欢：
$(string).appendTo("#mydiv");
/** Add this line and try **/
$("data-role='collapsible'").collapsible();
参考链接：https://api.jquerymobile.com/collapsible/
【讨论】：
试过了，但是控制台日志中出现语法错误unrecognized expression "data-role='collapsible'" 你可以给你的可折叠元素 id 或 class 并尝试绑定吗？喜欢：$('#mynewelem').collapsible(); 当你动态创建它们时，你不再需要数据角色的东西了。只需给他们一个类并在他们身上调用 collabsible() 函数：$( ".selector" ).collapsible()。参考：api.jquerymobile.com/collapsible
我尝试在 mydiv 周围包裹一个类元素并尝试使用 $(".myclass").collapsible(); 但它没有帮助以上是关于动态创建 div 元素（jQuery 移动页面）的主要内容，如果未能解决你的问题，请参考以下文章