Javascript 动态添加语义用户界面复选框/无线电/评级事件未触发

动态添加的复选框/单选按钮/评级元素未在语义ui中触发附加事件。下面是js fiddle for sample，当选中复选框时，它并不是触发所有事件。我也分别尝试了“设置”选项和onChange。一切都没有按预期进行。 Javascript:

$("#cbdiv").checkbox('setting', 'onChange', function() {
  alert("Changed");
});
$("#addcheckboxes").unbind();
var chkcounter = 0;
$("#addcheckboxes").bind('click', function() {
  $('#chkgrp').append("<div id='chkbx_'" + chkcounter + "class='ui checkbox'><input type='checkbox'  ></div>");
  $('#chkbx_' + chkcounter).checkbox({
    onChange: function() {
      alert('i am added. my id is : ' + $(this).attr('id'));
    }
  });
});

$（“#cbdiv”）.checkbox（'setting'，'onChange'，function（）{
警报（“变更”）；
});
$（“#添加复选框”）.unbind（）；
var chkcounter=0；
$（“#添加复选框”）.bind（'单击'，函数（））{
$（'chkgrp'）。追加（“”）；
$（'#chkbx'+chkcounter）.复选框({
onChange:function（）{
警报（'我已添加。我的id为：'+$（this.attr（'id'））；
}
});
});

Html

<div class="field">
  <div id="cbdiv" class="ui toggle checkbox">
    <input type="checkbox" id="confirm" name="confirmed">
    <label>Confirmed</label>
  </div>
  <div>
    <button id="addcheckboxes">Add checkboxes</button>
    <div id="chkgrp">
    </div>
  </div>
</div>

证实
添加复选框

---

这是因为append语句添加了错误的

id

元素。执行append语句后，如果查看html，它将如下所示

<div id="chkgrp">
   <div id="chkbx_" 0class="ui checkbox">
      <input type="checkbox">
   </div>
</div>

  $('#chkgrp').append("<div id='chkbx_" + chkcounter + "' class='ui checkbox'><input type='checkbox'><label>test</label></div>");

  $(this).parent().attr('id');

在上面的代码中，我在添加了chkcounter

id='chkbx'+chkcounter+'

之后关闭了

id

字符串。在前面的代码中，在添加chkcounter本身之前，您已经关闭了

id

字符串

id='chkbx''+chkcounter+“

更新

看起来您的

semantic

css具有以下样式

   .ui.checkbox input {
       position: absolute;
       top: 0px;
       left: 0px;
       opacity: 0;
       outline: 0px;
   }

由于上述样式，您无法看到复选框。如果要查看样式化复选框，则必须将

标签添加到复选框中，并按如下方式更新代码

<div id="chkgrp">
   <div id="chkbx_" 0class="ui checkbox">
      <input type="checkbox">
   </div>
</div>

  $('#chkgrp').append("<div id='chkbx_" + chkcounter + "' class='ui checkbox'><input type='checkbox'><label>test</label></div>");

  $(this).parent().attr('id');

我已经用上述所有更改更新了您的小提琴，您可以在复选框中看到演示
代码ID名称设置不正确，这就是原因。您可以看到下面的工作代码

$("#addcheckboxes").bind('click', function() {
   chkcounter++; // set counter increment
   $('#chkgrp').append("<div id='chkbx_"+chkcounter+"' class='ui checkbox'><input type='checkbox' name='checkboxval[]' id='checkbox_id_"+chkcounter+"'  ></div>"); 
   $('#chkbx_'+chkcounter).checkbox({onChange:function(){alert('i am added. my id is : '+$(this).attr('id'));}});
});

$（“#添加复选框”）.bind（'click'，function（）{
chkcounter++；//设置计数器增量
$（'chkgrp'）。追加（“”）；
$（'#chkbx_'+chkcounter）.checkbox（{onChange:function（）{alert（'i am added.my id为：'+$（this.attr（'id'））；}）；
});

希望这将对您有所帮助。
我已更新了脚本，但未按预期工作。这是最新的小提琴，