javascript - 动态添加语义ui复选框/ radio /评级事件不触发

动态添加的复选框/单选按钮/评分元素不会触发语义ui中的附加事件。下面是示例的js小提琴，当选中复选框时，它并非全部触发事件，我也分别尝试了“设置”选项和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'));
    }
  });
});

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>

Jsfiddle sample

最佳答案

这是因为append语句添加了错误的id元素。执行append语句后，如果您查看html，则如下所示。

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

执行上述代码后，您正在通过jquery搜索id chkbx_0，并尝试为其添加onChange事件。所以失败了。像下面这样更新您的append元素语法，它将起作用。

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

在上面的代码中，我在添加chkcounter id之后关闭了id='chkbx_" + chkcounter + "'字符串。在您先前的代码中，在添加chkcounter本身id之前，您已经关闭了id='chkbx_'" + chkcounter + "字符串。

更新

看起来您的semantic css具有以下样式。

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

由于上述样式，您无法看到该复选框。如果要查看样式化的复选框，则已将label添加到复选框并按如下所示更新代码。

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

我也注意到您正在尝试使用$(this).attr('id')获取元素的ID。该语句将给出输出undefined，因为该复选框没有名为id的任何属性。希望您尝试获取ID chkbx_0。在这种情况下，您必须像下面一样添加代码。

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

我已经通过上述所有更改更新了您的小提琴，您可以观看演示here.