Adding Bootstrap component to an HTML element on RUNTIME doesn't render properly

Question

Objective: I am trying to build an INNER HTML with a Bootstrap component upon click of a Button.

Problem: Bootstrap component is not getting rendered properly.

Observation: When I change the bootstrap component as innerHtml of a div the value is added as it is and not unfolded into bootstrap component itself.

Expected

<div id="issue">
    <div class="toggle btn btn-primary" data-toggle="toggle" style="width: 60.3438px; height: 38px;"><input id="view-toggle" checked="" data-toggle="toggle" data-on="On" data-off="Off" type="checkbox">
        <div class="toggle-group"><label class="btn btn-primary toggle-on">On</label><label class="btn btn-default active toggle-off">Off</label><span class="toggle-handle btn btn-default"></span></div>
    </div>
</div>

Actual

<div id="issue">
    <input id="view-toggle" checked="" data-toggle="toggle" data-on="On" data-off="Off" type="checkbox">
</div>

Code:

HTML

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <input  id="submit" type="button" value="submit" />
                <div id="issue">
                </div>
            </div>
        </div>
    </div>

    <script src="main.js"></script>
</body>

</html>

JS

$('#submit').click(function () {
    $('#issue').html('<input id="view-toggle" checked data-toggle="toggle" data-on="On" data-off="Off" type="checkbox" />');
});

I am sure there has to be a way to get around this problem. Or may be I am doing something wrong.

Please guide. TIA.

have you tried appending dynamic element in div#issue using append() or appendTo() — Chaitanya Ghule, Aug 25 '17 at 11:08

Abhishek Pandey · Accepted Answer · 2017-08-25T11:23:16.743

Jquery binds all functions to elements on page load, you'll need to bind event to [data-toggle='toggle'] manually when DOM changes.

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

$('#submit').click(function() {
  $('#issue').html('<input id="view-toggle" checked data-toggle="toggle" data-on="On" data-off="Off" type="checkbox" />');

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

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

  <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
  <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <input id="submit" type="button" value="submit" />
        <div id="issue">

        </div>
      </div>
    </div>
  </div>

  <script src="main.js"></script>
</body>

</html>

You're awesome! It works like magic. Could you also please elaborate on how this works or provide a link that explains this in detail? — iamsmkr, Aug 25 '17 at 11:26
Check these link: [event-binding-on-dynamically-created-elements](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements), [Understanding Event Delegation](https://learn.jquery.com/events/event-delegation/), [Direct and delegated events](http://api.jquery.com/on/]http://api.jquery.com/on/) — Abhishek Pandey, Aug 25 '17 at 11:32

Adding Bootstrap component to an HTML element on RUNTIME doesn't render properly

1 Answers1