使用JavaScript生成HTML切换按钮并初始化它们

我有一个部门：

<div id="div1">

</div>

问题是，当我生成第一个按钮并生成第二个按钮时，第一个按钮停止工作。我还尝试重新初始化同一个div中的第一个按钮，但这也不起作用

---

请告诉我，如果有更好的方法来做这件事，我会很高兴收到一些关于如何做的帮助（或者更好，示例代码）。问题是，我不能用其他方法来实现这一点，因为我是从JSON输入生成的

正如拉杰什所说，

+=innerHTML

正在引发问题

这将有助于：

<div id="container"></div>

var count = 1;

function createButton() {
  var newButton = "<input type='checkbox' id='" + count + "' checked data-toggle='toggle'><br>";
  $('#container').append(newButton);
  $('#' + count).bootstrapToggle();
  count = count + 1;
}

setInterval(createButton, 1000);

---

我不确定这是否是问题所在，但

+=innerHTML

是一种不好的做法。尝试使用

createElement

。另外，

count=count+1

可以是

count++

。另外，我猜输入标签需要

/>

在最后。是的，这就是问题所在。谢谢！：）别担心：）等两秒钟，我正在更新我的答案。

$('#1').bootstrapToggle();

<div id="container"></div>

var count = 1;

function createButton() {
  var newButton = "<input type='checkbox' id='" + count + "' checked data-toggle='toggle'><br>";
  $('#container').append(newButton);
  $('#' + count).bootstrapToggle();
  count = count + 1;
}

setInterval(createButton, 1000);

function createButton() {
  $('<input/>', {
    type: 'checkbox',
    checked: 'checked',
    data: {
      toggle: 'toggle'
    }
  })
  .appendTo('#container')
  .bootstrapToggle();
}

setInterval(createButton, 1000);