动态添加时Bootstrap切换无法正常显示 [英] Bootstrap toggle doesn't display well when added dynamically

问题描述

我正在尝试动态添加启动切换开关，但添加后显示效果不佳.感谢您的帮助！

I'm trying to add bootstrap toggle switch dynamically but it does not display well after adding it. Thanks for your help!

<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/

This is the Jsfiddle: http://jsfiddle.net/icamilo95/8wars2ep/3/

推荐答案

添加新的ID，类或新ID后，您需要再次调用 bootstrapSwitch() 否则也会改变现有切换的状态.

You need to call the bootstrapSwitch() again after adding and with a new ID, class or else it will alter the states of existing toggle as well.

$('.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

这篇关于动态添加时Bootstrap切换无法正常显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！