使用Javascript在表内动态创建切换按钮

时间:2017-08-16 05:37:16

标签: javascript jquery

我想在使用javascript创建的新行中创建一个切换按钮。 这是我的代码

h2o.deeplearning

所有代码都运行正常。我可以在抓取表中创建切换按钮。但是当我点击添加新的行按钮(+)时,我只获得了复选框。有关此错误的任何建议吗?

1 个答案:

答案 0 :(得分:0)

您需要为新添加的元素初始化bootstrapToggle并使用类代替id,因为不能对多个DOM元素使用相同的ID:

jQuery(function() {
  var counter = 1;
  jQuery('a.aaaaa').click(function(event) {
    event.preventDefault();

    var newRow = jQuery('<tr><td colspan="3" class="table-active"><input type="text" name="emp_code[]" class="form-control"></td><td colspan="3" class="table-success"><input type="text" name="emp_name[]" class="form-control"></td><td colspan="3" class="table-info"><input type="text" name="emp_mailid[]" class="form-control"></td><td colspan="3" class="table-info"><input type="text" name="nomination[]" class="form-control"></td><td colspan="3"><input type="checkbox" class="toggleone" name="attendance[]" data-toggle="toggle" data-on="Yes" data-off="No"></td><td><a href="javascript:void(0);" class="remove"><span class="glyphicon glyphicon-remove"></span></a></td></tr>');
    counter++;
    jQuery('table.table').append(newRow);
  //Init bootstrapToggle
  $('.toggleone').bootstrapToggle({
    on: 'Enabled',
    off: 'Disabled'
  });
  });
});