javascript - Bootstrap toggle doesn't display well when added dynamically - Stack Overflow

admin管理员组

文章数量:1324800

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

This is the Jsfiddle: /

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

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

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Jun 23, 2015 at 3:46 m4n0 32.4k2828 gold badges8080 silver badges9696 bronze badges asked Jun 22, 2015 at 10:32 Camilo OrdonezCamilo Ordonez 13922 silver badges1111 bronze badges 2

• What is not displayed? I can see the toggle switches here. – m4n0 Commented Jun 22, 2015 at 10:34
• Thanks Manoj. It only displays a regular checkbox, not the bootstrap toggle once you add it dynamically with JQuery. You can check the Jsfiddle – Camilo Ordonez Commented Jun 23, 2015 at 0:37

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

I was facing the same issue using bootstrap-toggle. Then after debugging, I understood the behaviour and handled it.

If the checkbox is not in the dom when page loads, then we need to initialize the toggler when the checkbox is available to the dom and also any listener methods.

if you are doing an ajax call then in the success method you can add the following in the end.

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

sometimes it may take time to add to the dom and your code gets run before checkbox getting added to the dom, you can wrap the above code in a javascript timer

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

Add Bootstrap toggle js after your main js file

Then call bootstrapswitch statement in your js file

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

本文标签： javascriptBootstrap toggle doesn39t display well when added dynamicallyStack Overflow