Question

我试图动态添加自举切换开关但添加后显示效果不佳。谢谢你的帮助！

<input id="TheCheckBox" type="checkbox" data-off-text="Yes" data-on-text="No" checked="false" class="BSswitch">

<p> <a class="btn btn-lg btn-primary" href="#">Display another Toggle</a></p>

$('.btn').on('click', function () {
    $('p').after(
        '<input id="TheCheckBox" type="checkbox" data-off-text="Male" data-on-text="Female" checked="false" class="BSswitch">'
    );
});

这是Jsfiddle：http://jsfiddle.net/icamilo95/8wars2ep/3/

Answer 1

在添加并使用新ID，类之后，您需要再次调用 bootstrapSwitch（） ，否则它也会改变现有切换的状态。

$('.btn').on('click', function () {
    $('p').after(
        '<input id="newCheckBox" type="checkbox" data-off-text="Male" data-on-text="Female" checked="false" class="newBSswitch">'
    );
    $('.newBSswitch').bootstrapSwitch('state', true); // Add
});

JSfiddle

Answer 2

在主js文件

之后添加Bootstrap切换js

然后在你的js文件中调用 bootstrapswitch 语句

$('.your_toggle_class_name').bootstrapSwitch('state', true);

Answer 3

我在使用bootstrap-toggle时遇到了同样的问题。然后，在调试之后，我了解了行为并进行了处理。

如果页面加载时该复选框不在dom中，那么当该复选框可用于dom以及任何侦听器方法时，我们需要初始化切换器。

如果要进行ajax调用，则可以在成功方法中最后添加以下内容。

$("[data-toggle='toggle']").bootstrapToggle('destroy')                 
$("[data-toggle='toggle']").bootstrapToggle();

有时可能需要一些时间才能添加到dom，并且您的代码会在复选框添加到dom之前运行，您可以将以上代码包装在javascript计时器中

     setTimeout( () => {
                    $("[data-toggle='toggle']").bootstrapToggle('destroy')                 
                    $("[data-toggle='toggle']").bootstrapToggle();
                    $(".checkbox").change(function() {
                      console.log("toggled");
                       });
                    }, 100 );

动态添加时，Bootstrap切换不能很好地显示

3 个答案: