Javascript Bootstrap3切换仅作为切换显示一次

我没有发现任何对我有帮助的问题。我不使用Bootstrap4，所以，如果除了更改Bootstrap版本之外还有其他解决方案，我将不胜感激

我正在使用Node.js、CSS、HTML和Javascript进行web开发。我的网站有两个复选框，我正在更改为切换。在我的代码中，切换设置如下：

'<div class="options">'
        '<input type="checkbox" id="draw-line" checked data-toggle="toggle" data-size="mini" data-on="Traçar trajetória" data-off="Traçar trajetória"/>'
        '</div>'
        '<div class="options mrg-botm" style="margin-top: 5px">'
        '<input type="checkbox" id="show-info" checked data-toggle="toggle" data-size="mini" data-on="Informações de localização" data-off="Informações de localização"/>'
        '</div>'

“”
''
''
''
''
''

单击历史记录按钮时，此代码将附加到HTML正文中，单击关闭按钮时，此代码将被删除。我们还创建了一个方便的工具，以使这些切换具有反应性。（有一些变量直接监听切换按钮，长话短说）

但是，当我用开关打开同一面板时，它们显示为：

单击“历史记录”按钮时添加到HTML文档的整个代码如下（带注释的关键部分）：

新建ScopedWatcher(
（）=>watch.historyPanel.value，
异步（）=>{
if（watch.historyPanel.value）{
//这里是面板DIV代码
var historyPanelCode=
'' +
“Histórico de localizaão
”+
'' +
'' +
'' +
'' +
'' +
'' +
“阿泰”+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
“Empréstimo”+
'' +
'' +
'' +
“阿图尔”+
“待办事项处置”+
“colaborador atual托多酒店”+
'' +
'' +
“公共汽车”+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
“大约的总成本：

”+
“费卡尔·希斯特·里科
”+
''
$（'body'）。追加（$（historyPanelCode））
$（'.draggable'）.draggable（）
$（“#datetimepicker_from”）
.日期时间选择器({
defaultDate:new Date（）.setHours（0,0,0,0），
区域设置：“pt br”，
showClose:false，
})
.on（'dp.change'，函数（）{
//getHistory（imei）；
$（this）.data（'DateTimePicker'）.hide（）
})
$（'datetimepicker'u to'）
.日期时间选择器({
defaultDate:new Date（）.setHours（23,59,0,0），
区域设置：“pt br”，
showClose:false，
})
.on（'dp.change'，函数（）{
//getHistory（imei）；
$（this）.data（'DateTimePicker'）.hide（）
})
$（“#历史位置控制面板”）
.on（'click'、'button.hist loc button'）功能（事件）{
var selectedMarkeraryPos=watch.selectedMarkeraryPos
var pos
开关（event.target.id）{
“前进”一案：
pos=++所选的MarkerArrayPos
打破
“回来”一案：
pos=--selectedMarkerArrayPos
打破
“最后”一案：
位置=标记阵列长度-1
打破
违约：
pos=0
打破
}
watch.selectedmarkerarypos=pos
displayInfoMessage（markerArray[监视.选择MarkerArrayPos]）
})
.on（'点击'，'画线'），函数（事件）{
如果（watch.toggleLineDraw.value！==false）{
linePath.setMap（映射）
}否则{
linePath.setMap（空）
}
})
.on（'单击'，'显示信息'），函数（事件）{
如果（watch.showInfo==true）{
displayInfoMessage（markerArray[监视.选择MarkerArrayPos]）
}否则{
CloseAllInfo窗口（）
}
})
.on（'单击'，'关闭历史btn'，函数（）{
历史
初始化器tp（）
})
.on（'click'，'search'，函数（）{
getHistory（watch.historyPanel.id）
})
//init（）加载引用Toggle的JS引导模块。
//认为只运行一次init（）就能解决这个问题。。。
//start是一个变量，用于计算单击HistoryPanel按钮的次数。
如果（开始<2）{
新的切换（“#绘制线”，watch.toggleLineDraw.init（）
新的切换（'#show info'，watch.showInfo）.init（）
}
}否则{
$（'hist loc control panel'）。删除（）
}
}
)

new ScopedWatcher(
  () => watch.historyPanel.value,
  async () => {
    if (watch.historyPanel.value) {
    // here, the panel DIV code
      var historyPanelCode =
        '<div id="hist-loc-control-panel" class="draggable floating-panel">' +
        '<span class="title"><b>Histórico de localização</b></span><br>' +
        '<div class="input-group date" id="datetimepicker_from" style="width: 200px;">' +
        '<input type="text" class="form-control" id="date_from" />' +
        '<span class="input-group-addon">' +
        '<span class="fa fa-calendar"></span>' +
        '</span>' +
        '</div>' +
        'até' +
        '<div class="input-group date" id="datetimepicker_to" style="width: 200px; margin-bottom: 5px">' +
        '<input type="text" class="form-control" id="date_to" />' +
        '<span class="input-group-addon">' +
        '<span class="fa fa-calendar"></span>' +
        '</span>' +
        '</div>' +
        '<div>' +
        'Empréstimo' +
        '</div>' +
        '<div>' +
        '<select id="leasing_option" style="margin-bottom: 5px;">' +
        '<option value="1">Atual</option>' +
        '<option value="2">Todos do dispositivo</option>' +
        '<option value="3">Todos do colaborador atual</option>' +
        '</select>' +
        '</div>' +
        '<button class="btn btn-primary btn-xs search mrg-botm">Buscar</button>' +
        '<div id="history-location-position-info" class="btn-xs"></div>' +
        '<button class="btn btn-success btn-xs hist-loc-button" id="first" disabled><<</button>' +
        '<button class="btn btn-success btn-xs hist-loc-button" id="back" disabled><</button>' +
        '<button class="btn btn-success btn-xs hist-loc-button" id="forward">></button>' +
        '<button class="btn btn-success btn-xs hist-loc-button" id="last">>></button>' +
        '<div class="mrg-botm"></div>' +
        '<div class="options">' +
        '<input type="checkbox" id="draw-line" checked data-toggle="toggle" data-size="mini" data-on="Traçar trajetória" data-off="Traçar trajetória"/>' +
        '</div>' +
        '<div class="options mrg-botm" style="margin-top: 5px">' +
        '<input type="checkbox" id="show-info" checked data-toggle="toggle" data-size="mini" data-on="Informações de localização" data-off="Informações de localização"/>' +
        '</div>' +
        '<div class="options"><label style="vertical-align:middle">Deslocamento total aproximado: </label></br><label style="vertical-align:middle" id="sum-distance"></label></div></br>' +
        '<div><button id="close-history-btn" class="btn btn-warning btn-xs">Fechar histórico</button><br></div>' +
        '</div>'
      $('body').append($(historyPanelCode))
      $('.draggable').draggable()
      $('#datetimepicker_from')
        .datetimepicker({
          defaultDate: new Date().setHours(0, 0, 0, 0),
          locale: 'pt-br',
          showClose: false,
        })
        .on('dp.change', function () {
          // getHistory(imei);
          $(this).data('DateTimePicker').hide()
        })
      $('#datetimepicker_to')
        .datetimepicker({
          defaultDate: new Date().setHours(23, 59, 0, 0),
          locale: 'pt-br',
          showClose: false,
        })
        .on('dp.change', function () {
          // getHistory(imei);
          $(this).data('DateTimePicker').hide()
        })
      $('#hist-loc-control-panel')
        .on('click', 'button.hist-loc-button', function (event) {
          var selectedMarkerArrayPos = watch.selectedMarkerArrayPos
          var pos
          switch (event.target.id) {
            case 'forward':
              pos = ++selectedMarkerArrayPos
              break

            case 'back':
              pos = --selectedMarkerArrayPos
              break

            case 'last':
              pos = markerArray.length - 1
              break

            default:
              pos = 0
              break
          }
          watch.selectedMarkerArrayPos = pos
          displayInfoMessage(markerArray[watch.selectedMarkerArrayPos])
        })
        .on('click', '#draw-line', function (event) {
          if (watch.toggleLineDraw.value !== false) {
            linePath.setMap(map)
          } else {
            linePath.setMap(null)
          }
        })
        .on('click', '#show-info', function (event) {
          if (watch.showInfo === true) {
            displayInfoMessage(markerArray[watch.selectedMarkerArrayPos])
          } else {
            closeAllInfoWindow()
          }
        })
        .on('click', '#close-history-btn', function () {
          finalizeHistory()
          initializeRTP()
        })
        .on('click', '.search', function () {
          getHistory(watch.historyPanel.id)
        })
      // init() loads the JS bootstrap modules referring to Toggle.
      // thought that running init() just once would solve it...
      // start is a var that counts how many times the HistoryPanel button was clicked.
      if (start < 2) {
        new Toggle('#draw-line', watch.toggleLineDraw).init()
        new Toggle('#show-info', watch.showInfo).init()
      }
    } else {
      $('#hist-loc-control-panel').remove()
    }
  }
)