Question

我有一个div：

<div id="div1">

</div>

我正在尝试生成＆＃34;切换＆＃34;使用JavaScript的按钮（http://www.bootstraptoggle.com/）：

<script>
    var count = 1;

    function foo() {
        var newButton = "<input type=\"checkbox\" id=\"" + count + "\" checked data-toggle=\"toggle\"><br>";
        document.getElementById('div1').innerHTML += newButton;
        $('#' + count).bootstrapToggle();

        // also tried re-initializing the first created button, this won't work either..
        //$('#1').bootstrapToggle();

        count = count + 1;
    }
    setInterval(foo, 4000);
</script>

这样就可以很好地创建按钮，但必须先通过调用来初始化这些按钮。

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

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

如果还有更好的方法，我很乐意接受一些帮助（或更好的示例代码），了解如何执行此操作。问题是我不能这样做，因为我从JSON输入生成这些。

Answer 1

正如Rajesh所说，+=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);

编辑：您还可以稍微整理一下，以便失去丑陋的count全局：

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

setInterval(createButton, 1000);

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

1 个答案: