动态创建div元素（jQuery移动页面）

当我尝试在jquery中动态添加数据角色div元素时，它失败 - 它显示出来，但它的格式不再。在html文件中，您可以看到我放置创建的div元素的位置。动态创建div元素（jQuery移动页面）

什么是错，我怎么能使它工作？

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的字符串

来源

2017-07-31 java

当你动态地添加它时，你必须绑定可折叠的元素。

像：

$(string).appendTo("#mydiv"); 
/** Add this line and try **/ 
$("data-role='collapsible'").collapsible();

参考链接：https://api.jquerymobile.com/collapsible/

来源

2017-07-31 12:42:33 Kashyap

尝试，但我得到的语法错误_unrecognized表达“数据角色=‘折叠’” _在控制台日志 – java

能不能给id或class到你的可折叠元素，并尝试绑定？像：$（'＃mynewelem'）。collapsible（）; – Kashyap

当您动态创建它们时，您不再需要数据角色。给他们一个类，并调用他们的合作（）函数： '$（“.selector”）.collapsible（）'。 Ref：https：//api.jquerymobile.com/collapsible/ –

动态创建div元素（jQuery移动页面）

回答

相关问题