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

首页注册登录

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3934 天前的主题，其中的信息可能已经有所发展或是发生改变。

使用Bootstrap-switch，根据数据库中查询结果动态生成网页元素，其中用jQuery生成switch式按钮插入到页面，在js代码最后执行$(".switch").bootstrapSwitch()，但是只有页面原有的switch类会应用bootstrap-switch样式，新生成的就一光凸凸的checkbox而没有switch式按钮，何解？（以前用jquery ui时也出现过类似情况，奈何自己前端渣技能没解决）

7 条回复 • 1970-01-01 08:00:00 +08:00

1

guchengf

2014-02-16 16:58:07 +08:00

输出一下 $(".switch") 的结果，看看添加的那个按钮有没有被选择到

2

FrankFang128

2014-02-16 16:59:46 +08:00 via Android

审查元素

3

cbsw

OP

2014-02-16 17:07:35 +08:00

@guchengf 有啊，添加按钮时我就加上 switch 类了
@FrankFang128 在Firebug的console中再执行一次$(".switch").bootstrapSwitch()就把样式应用上了，所以怀疑是这条语句执行顺序的问题，但改放到哪都不行

4

guchengf

2014-02-16 18:57:21 +08:00

@cbsw 加个timeout?

5

crs0910

2014-02-16 22:54:20 +08:00

把$(".switch").bootstrapSwitch()写在你生成内容的function里面

6

cbsw

OP

2014-02-16 23:24:23 +08:00

@guchengf @crs0910 经排查应该是我根据ajax查询的数据生成switch button，而ajax是异步的，在取到数据前$(".switch").bootstrapSwitch()已经执行过了，所以或许我应该把这条语句放在$.getJSON()的回调函数中执行

7

cbsw

OP

2014-02-16 23:30:51 +08:00

果然如此,多谢各位V友，如下搞定，
$.getJSON(url,function(data){
//generate switch buttons;
$(".switch").bootstrapSwitch();
});

关于 · 帮助文档 · 博客 · API · FAQ · 实用小工具 · 3028 人在线 最高记录 6679 ·

Select Language

创意工作者们的社区

World is powered by solitude

VERSION: 3.9.8.5 · 22ms · UTC 13:49 · PVG 21:49 · LAX 05:49 · JFK 08:49
Developed with CodeLauncher
♥ Do have faith in what you're doing.