添加引導組件運行時的HTML元素不會呈現正確

目的：我試圖建立與後點擊按鈕引導程序組件的內部HTML。添加引導組件運行時的HTML元素不會呈現正確

問題： Bootstrap組件未正確渲染。

觀察：當我改變自舉組件作爲div值加，因爲它是和不展開成引導部件本身的innerHtml。

預計

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

實際

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

代碼：

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>

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

我相信必須有一個方法來解決這個問題。或者可能是我做錯了什麼。

請指導。 TIA。

來源

2017-08-25 codingkapoor

你嘗試使用追加（）或appendTo（） –

Jquery將所有函數綁定到頁面加載的元素上，當DOM改變時，您需要手動將事件綁定到[data-toggle='toggle']。

$("[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>

來源

2017-08-25 11:14:43

你真棒追加動態元素的div＃問題！它像魔術一樣工作。您是否也請詳細說明這是如何工作的或提供詳細解釋這一點的鏈接？ – codingkapoor

檢查這些鏈接：[事件綁定動態創建的元素]（https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements），[瞭解事件委派]（ https://learn.jquery.com/events/event-delegation/），[直接和委託事件]（http://api.jquery.com/on/] http://api.jquery.com/on/ ） –

添加引導組件運行時的HTML元素不會呈現正確

回答

相關問題