jQuery点击不会开火

jQuery On click wont fire

本文关键字：开火 jQuery      更新时间：2023-09-26

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

我正在为复选框单击事件使用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>

当值发生变化时，当您动态创建一个新的复选框时，您需要通过将事件分配给非动态祖先来将其委托给您的复选框：

$('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);
相关文章：