使用 JS 和 jQuery 动态添加 bootstrap 的切换按钮不起作用

Question

我是 JS 和 HTML 的初学者，我正在尝试在我的代码中使用 bootstrap 按钮（切换）。问题是它们并没有像我期望的那样很好地出现。

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

由于 Bootstrap 按钮第一次加载正确，我假设 link 在 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 文件，为每个条目添加行，并在每行的第一列中添加一个切换按钮，我假装它就像第一个漂亮的灰色按钮。第二个切换的问题在哪里？我什么都试过了，删除 id，移动文本等等

而且我找不到解决方案。

Answer 1

检查漂亮的复选框是否由某处的 javascript 函数创建（如果您在应用中使用模板，则可能如此。）

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

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

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

Answer 2

看来添加这个可以解决问题：

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

在遍历 table 之后，JS 必须运行以某种方式再次在复选框上运行，然后才能正常工作。

使用 JS 和 jQuery 动态添加 bootstrap 的切换按钮不起作用

Add Toggle button with bootstrap dinamically with JS and jQuery not functioning

html

javascript

button

toggle

twitter-bootstrap