动态添加时，Bootstrap 切换显示效果不佳

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
});

JS小提琴