Bootstrap переключатель не работает после нажатия кнопки

Question

Я пытаюсь сделать bootstrap тумблер через jquery, но он просто не работает после первого раза, я не могу понять, что делать.

$(document).ready(function(){
    
    $('#showHideButton').change(function(){
      var action = $(this).prop('checked');
      
      $('.container').html('<input id="showHideButton" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger">');
      $('.container input').bootstrapToggle();
      
      console.log(action);
     //if(action)
     //   console.log('Inside if');
     //else
     //   console.log('Inside else');
    });
    
});

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<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>
   
<br />&nbsp;
<input type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger">   
<br /><br />


<div class="container">
  <input id="showHideButton" type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger">
</div>

, и если я использую тот же код без jquery, он работает нормально

<input type="checkbox" checked data-toggle="toggle">

проверьте ссылку https://www.bootstraptoggle.com/

Answer 1

Код выше, кажется, делает флажок, и это так. Вот пример, который делает переключатель вместо флажка:

$(document).ready(function() {
  $('#showHideButton').click(function() {
    $('#showHideButton').html('<div class="custom-control custom-switch">' +
    '<input type="checkbox" class="custom-control-input" id="customSwitch1">' +
    '<label class="custom-control-label" for="customSwitch1">' +
    'Dynamic switch</label>' +
    '</div>');
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<div class="container">
  <p>A dynamic switch:</p>
  <div id="showHideButton">Click Me!</div>
  <hr/>
</div>

Answer 2

Проверьте это

function callOnClick(e){
    var action = $(e).prop('checked');
    console.log('Inside '+action);

    if(action)
      $('.container').html('<input id="showHideButton" type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger" onchange="callOnClick(this)">');
    else
      $('.container').html('<input id="showHideButton" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" onchange="callOnClick(this)">');

    $('.container input').bootstrapToggle();
  }

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<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>
     
<br />

<div class="container">
  <input id="showHideButton" type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger" onchange="callOnClick(this)">
</div>

Answer 3

Можете ли вы попробовать добавить эту строку

$('#showHideButton input').bootstrapToggle();

после вашей строки

$('#showHideButton').html(‘.......');

Answer 4

Если вы используете Bootstrap и на вашей странице загружено Bootstrap css, вы должны вставить правильные css классы для ввода, чтобы флажок отображался как Bootstrap switch .

Проверьте примеры Bootrsap, относящиеся к коммутаторам (и посмотрите на атрибут класса и классы css, использованные в примере):

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

Вы можете найти все примеры здесь: https://getbootstrap.com/docs/4.2/components/forms/#switches