使用JS和jQuery无法自动启动带有Bootstrap的Toggle按钮

Question

我是JS和HTML的初学者，我正在尝试在代码中使用引导按钮（切换）。 问题是，它们到处都没有我期望的那么好。

我想我两次都使用相同的代码，但是按钮的显示方式仍然不同。

由于Bootstrap按钮是第一次正确加载的，因此我认为HTML开头的链接是正确的

这三个按钮第一次出现如下：

<div class="checkbox"">
          <br>
          <br>
           <input checked data-toggle="toggle" type="checkbox">
      </div>

第二次出现切换是由于以下代码

<script >
$(document).ready(function(){
    $.getJSON("mylocaljsonfile.json", function(data){
        var concept_list= '';
        $.each(data, function(key, value){
            console.log("here comes another")
            console.log(value)
            console.log("this is the key:")
            console.log(key)
            concept_list += '<tr>';
            concept_list += '<td align="center" style="vertical-align:center>';
            concept_list += '<div class="checkbox" ><input checked data-toggle="toggle" type="checkbox" data-id="' + value.name + '"></div>';
            concept_list += '</td>';
            concept_list += '<td>'+value.name+'</td>';
            concept_list += '<td>'+value.color+'</td>';
            concept_list += '<td>'+value.fingerprint+'</td>';
            concept_list += '<td>'+value.hits+'</td>';
            concept_list += '<td>'+value.EN+'</td>';
            concept_list += '<td>'+value.DE+'</td>';
            concept_list += '<td>'+value.FR+'</td>';
            concept_list += '</tr>';
        });
        $('#concept_list').append(concept_list);
    });
});

代码读取本地JSON文件，为每个条目添加行，并在每行的firts列中添加一个切换按钮，我伪装成第一个漂亮的灰色按钮。 第二个触发器的问题出在哪里？ 我尝试了所有操作，删除了ID，在文本中四处移动，等等。

我找不到解决方法。

Answer 1

检查外观漂亮的复选框是否是由某个地方的javascript函数创建的（就像您在应用中使用模板一样。）

您的js可能已经在应用样式的代码（将标准复选框转换为漂亮的复选框）运行后插入了这些复选框。

您最好的选择是，我认为您可能需要寻找一个包含在项目中的app.js文件，其中可能包含该代码。

您需要在js完成为每个复选框插入复选框后运行相同的代码。

Answer 2

添加此功能似乎可以解决问题：

$("[data-toggle]").bootstrapToggle()

在遍历表之后，JS必须以某种方式再次运行该功能，然后它才能起作用。