动态添加语义ui复选框/无线电/评级事件未触发

Question

动态添加的复选框/单选按钮/评级元素不会在语义ui中触发附加事件。下面是样本的js小提琴，当复选框被选中时，它不是全部触发事件我同时也尝试了'setting'选项和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

Answer 1

这是因为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 + "字符串。

UPDATE

看起来你的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.

Answer 2

在复选框代码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'));}});
});

希望这会帮助你。