Hướng dẫn bootstrap toggle switch not working - công tắc bật tắt bootstrap không hoạt động

Question

Tôi đang cố gắng hiển thị công tắc bật tắt bootstrap thông qua jQuery nhưng đơn giản là nó không hoạt động sau lần đầu tiên, tôi không thể tìm ra phải làm gì.

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

Và nếu tôi đang sử dụng cùng một mã không có jQuery, nó hoạt động tốt

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

Kiểm tra liên kết https://www.bootstraptoggle.com/

Hỏi ngày 20 tháng 4 năm 2020 lúc 18:50Apr 20, 2020 at 18:50

Mã trên dường như đang tạo hộp kiểm và nó là. Đây là một ví dụ tạo công tắc thay vì hộp kiểm:

$(document).ready(function() {
  $('#showHideButton').click(function() {
    $('#showHideButton').html('<div class="custom-control custom-switch">' +
    '<input type="checkbox" class="custom-control-input" id="customSwitch2">' +
    '<label class="custom-control-label" for="customSwitch2">' +
    '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>

Đã trả lời ngày 20 tháng 4 năm 2020 lúc 19:00Apr 20, 2020 at 19:00

Terrymorseterrymorseterrymorse

6.4951 Huy hiệu vàng18 Huy hiệu bạc24 Huy hiệu đồng1 gold badge18 silver badges24 bronze badges

2

Bạn có thể thử thêm dòng này không

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

sau dòng của bạn

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

Đã trả lời ngày 20 tháng 4 năm 2020 lúc 19:47Apr 20, 2020 at 19:47

5

Nếu bạn đang sử dụng Bootstrap và trong trang của mình, bạn có Bootstrap CSS được tải, bạn nên chèn các lớp CSS chính xác vào đầu vào, để hộp kiểm được hiển thị dưới dạng công tắc Bootstrap.

Kiểm tra các ví dụ bootrsap liên quan đến các công tắc (và, xem thuộc tính lớp và các lớp CSS được sử dụng trong ví dụ):

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">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>

Bạn có thể tìm thấy tất cả các ví dụ ở đây: https://getbootstrap.com/docs/4.2/components/forms/#switches

Đã trả lời ngày 20 tháng 4 năm 2020 lúc 18:57Apr 20, 2020 at 18:57

AndDanddAndD

2.0711 Huy hiệu vàng8 Huy hiệu bạc21 Huy hiệu đồng1 gold badge8 silver badges21 bronze badges

Kiểm tra điều này

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>

Đã trả lời ngày 21 tháng 4 năm 2020 lúc 10:51Apr 21, 2020 at 10:51

programming bootstrap