动态添加时，Bootstrap切换按钮显示不好

Question

我正在尝试动态添加 Bootstrap 切换开关，但添加后它显示不正确。感谢您的帮助！

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

- Camilo Ordonez

---

什么没有显示？我可以在这里看到切换开关。 - m4n0

谢谢Manoj。当您使用JQuery动态添加时，它只显示普通的复选框，而不是Bootstrap切换按钮。您可以检查Jsfiddle。 - Camilo Ordonez

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

- m4n0

---

谢谢，Manoj，我很感激！ - Camilo Ordonez

Manoj，你能告诉我如何使状态动态化吗？http://jsfiddle.net/icamilo95/8wars2ep/6/ - Camilo Ordonez

Camilo，请开一个新问题来询问。 - m4n0

这是问题链接：http://stackoverflow.com/questions/30995578/how-can-i-change-the-bootstrap-toggle-state-dynamically - Camilo Ordonez

这是关于JavaScript激活的内容。 :) - william.eyidi

Answer 2

我在使用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 );

- Pankaj Jaiswal

Answer 3

在你的主要js文件后添加Bootstrap toggle js。

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

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

- Rams