V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
cbsw
V2EX  ›  程序员

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

  •  
  •   cbsw ·
    dengshuan · 2014-02-16 16:37:46 +08:00 · 4206 次点击
    这是一个创建于 3732 天前的主题,其中的信息可能已经有所发展或是发生改变。
    使用Bootstrap-switch,根据数据库中查询结果动态生成网页元素,其中用jQuery生成switch式按钮插入到页面,在js代码最后执行$(".switch").bootstrapSwitch(),但是只有页面原有的switch类会应用bootstrap-switch样式,新生成的就一光凸凸的checkbox而没有switch式按钮,何解?(以前用jquery ui时也出现过类似情况,奈何自己前端渣技能没解决)
    7 条回复    1970-01-01 08:00:00 +08:00
    guchengf
        1
    guchengf  
       2014-02-16 16:58:07 +08:00
    输出一下 $(".switch") 的结果,看看添加的那个按钮有没有被选择到
    FrankFang128
        2
    FrankFang128  
       2014-02-16 16:59:46 +08:00 via Android
    审查元素
    cbsw
        3
    cbsw  
    OP
       2014-02-16 17:07:35 +08:00
    @guchengf 有啊,添加按钮时我就加上 switch 类了
    @FrankFang128 在Firebug的console中再执行一次$(".switch").bootstrapSwitch()就把样式应用上了,所以怀疑是这条语句执行顺序的问题,但改放到哪都不行
    guchengf
        4
    guchengf  
       2014-02-16 18:57:21 +08:00
    @cbsw 加个timeout?
    crs0910
        5
    crs0910  
       2014-02-16 22:54:20 +08:00
    把$(".switch").bootstrapSwitch()写在你生成内容的function里面
    cbsw
        6
    cbsw  
    OP
       2014-02-16 23:24:23 +08:00
    @guchengf @crs0910 经排查应该是我根据ajax查询的数据生成switch button,而ajax是异步的,在取到数据前$(".switch").bootstrapSwitch()已经执行过了,所以或许我应该把这条语句放在$.getJSON()的回调函数中执行
    cbsw
        7
    cbsw  
    OP
       2014-02-16 23:30:51 +08:00
    果然如此,多谢各位V友,如下搞定,
    $.getJSON(url,function(data){
    //generate switch buttons;
    $(".switch").bootstrapSwitch();
    });
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3153 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 13:31 · PVG 21:31 · LAX 06:31 · JFK 09:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.