为什么 Bootstrap 动态生成的元素没有 CSS 样式

2014-02-16 16:37:46 +08:00
 cbsw
使用Bootstrap-switch,根据数据库中查询结果动态生成网页元素,其中用jQuery生成switch式按钮插入到页面,在js代码最后执行$(".switch").bootstrapSwitch(),但是只有页面原有的switch类会应用bootstrap-switch样式,新生成的就一光凸凸的checkbox而没有switch式按钮,何解?(以前用jquery ui时也出现过类似情况,奈何自己前端渣技能没解决)
4229 次点击
所在节点    程序员
7 条回复
guchengf
2014-02-16 16:58:07 +08:00
输出一下 $(".switch") 的结果,看看添加的那个按钮有没有被选择到
FrankFang128
2014-02-16 16:59:46 +08:00
审查元素
cbsw
2014-02-16 17:07:35 +08:00
@guchengf 有啊,添加按钮时我就加上 switch 类了
@FrankFang128 在Firebug的console中再执行一次$(".switch").bootstrapSwitch()就把样式应用上了,所以怀疑是这条语句执行顺序的问题,但改放到哪都不行
guchengf
2014-02-16 18:57:21 +08:00
@cbsw 加个timeout?
crs0910
2014-02-16 22:54:20 +08:00
把$(".switch").bootstrapSwitch()写在你生成内容的function里面
cbsw
2014-02-16 23:24:23 +08:00
@guchengf @crs0910 经排查应该是我根据ajax查询的数据生成switch button,而ajax是异步的,在取到数据前$(".switch").bootstrapSwitch()已经执行过了,所以或许我应该把这条语句放在$.getJSON()的回调函数中执行
cbsw
2014-02-16 23:30:51 +08:00
果然如此,多谢各位V友,如下搞定,
$.getJSON(url,function(data){
//generate switch buttons;
$(".switch").bootstrapSwitch();
});

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/100459

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX