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 + "字符串。

<强>更新

您的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的属性。我希望你是想获得身份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'));}});
});

希望这会对你有所帮助。

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

2 个答案: