javascript - Bootstrap 开关不适用于动态创建的复选框输入

Question

我有以下脚本组合:jquery、bootstrap、modernizer、json2html。

调用类似的东西:

<script>
   $('#my01Switch').bootstrapSwitch({
            onText: 'ON',
            offText: 'OFF',
            size: 'large',
            onColor: 'success',
            offColor: 'warning',
            labelText: '*'
        });
    </script>

就在结束 body 标签之前，在 :

<input name="my01Switch" id="my01Switch" data-toggle="switch" checked="" type="checkbox">

上面是动态生成的输入标签。

请帮忙。

Answer 1

在执行 bootstrap switch 插件之前检查文档是否准备就绪:

$(document).ready(function() {
    //Code
});

更新开关复选框代码:

给复选框添加一个类

<input name=\"my01Switch\" id=\"my01Switch\" type=\"checkbox\"  data-toggle=\"switch\" checked=\"true\" class=\"custom-box\"/>

更新js代码:

function renderRooms(json)
{
    if (json !== undefined) {

        //.....

        //$('#roomBoxWrap').json2html(json, transforms.theRoom);
        $('#form-nav').json2html(json.rooms, transforms.menurooms);
        $('#title_room_name').append(getRoomName(json));

        //After the rooms are loaded
        $('.custom-box').bootstrapSwitch();
    }
}