Question

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

我正在使用on事件处理程序进行复选框点击事件，所以我希望它能够正常工作。

知道为什么这不能按预期工作吗？

＆＃13;

$('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">');
}

＆＃13;

<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>

＆＃13;

Answer 1

当您在值更改时动态创建新复选框时，您需要通过将事件分配给非动态祖先来将事件委派给您的复选框：

$('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);

jQuery点击不会开火

1 个答案: