javascript - jQuery 点击时不会触发

Question

我有一个文本框、一个复选框和一个span 标签。当我单击复选框时，它应该在 span 标记中显示其状态。当 textbox 更新时，它会重新插入复选框 block 。当您现在单击该复选框时，它无法更新状态。

我正在为复选框单击事件使用 on 事件处理程序，因此我希望它能正常工作。

知道为什么这没有按预期工作吗？

$('div[role] input[type=checkbox]').on('click', chg);

$('div[role] input[type=text]').on('input', sourceChanged);

function chg() {
  var istiki = $(this).is(":checked");
  $('#upd').html(istiki);
}

function sourceChanged() {
  $('span', $(this).closest('.input-group')).html('<input type="checkbox">');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div role="Tiki" class="input-group">
  <input type="text" class="form-control" />
  <span class="input-group-addon"><input type="checkbox" /></span>
</div>
<span id="upd"></span>

Answer 1

当您在值更改时动态创建一个新复选框时，您需要通过将事件分配给非动态祖先来将事件委托(delegate)给您的复选框:

$('div[role]').on('change', 'input[type=checkbox]', chg);

请注意我是如何使用 change 而不是 click 的，因为这更适合复选框。

---

在下面的代码片段中，我还将 $(this).is(":checked") 更改为 this.checked。

$('div[role]').on('change', 'input[type=checkbox]', chg);

$('div[role] input[type=text]').on('input', sourceChanged);

function chg() {
  var istiki = this.checked;
  $('#upd').html(istiki);
}

function sourceChanged() {
  $('span', $(this).closest('.input-group')).html('<input type="checkbox">');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div role="Tiki" class="input-group">
  <input type="text" class="form-control" />
  <span class="input-group-addon"><input type="checkbox" /></span>
</div>
<span id="upd"></span>

另请注意，如果您想让它说false，您应该将您的istiki 变量转换为字符串:

$('#upd').html('' + isticki);