时间戳

首页 > 解决方案 > 即使单击父 div，也可以使动态生成的复选框单击工作

javascript - 即使单击父 div，也可以使动态生成的复选框单击工作

问题描述

我在动态生成的行中动态生成了复选框。我将委托事件（'click'）侦听器附加到整行。

一切都很好 - 我通过单击行中的任何位置来切换复选框状态，除了一件小事 - 单击复选框本身不会切换其状态。

下面是我的示例代码。有任何想法吗？

//Generate dynamically div row encompassing checkbox and label
$('#wraper').append(`
<div id="row">
	<label>This is the checkbox</label>
  <input type="checkbox"></input>
</div>
<br>
<span class="msg"></span>
`);
//Attach delegated event listener to entire row
$('#wraper').on('click', '#row', function(){
	//Toggle checked attribute
	$('#row [type="checkbox"]').get(0).checked = !$('#row [type="checkbox"]').get(0).checked;
  //Display checked status after click
	$('#wraper .msg').text(`Checkbox status is ${$('#row [type="checkbox"]').get(0).checked}`);
});
<!doctype html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
  <div id="wraper"></div>
</body>
</html>

标签： javascriptjqueryhtml

解决方案

如评论中所述，从代码中删除click逻辑。它会立即覆盖默认的 HTML 功能。如果您的意图是即使单击标签也检查复选框，您可以使用该for属性并指向复选框的id：

更新：如果您想在父级的任何地方选中复选框div，则向父级添加一个click处理程序。如果点击目标不是 a checkbox，则强制选中复选框。如果目标是 a checkbox，不要做任何事情。

$('#wraper').append(`
<div id="row">
	<label>This is the checkbox</label>
  <input type="checkbox"></input>
</div>
<br>
<span class="msg"></span>
`);

$('#wraper').on('click', '#row', function(e) {
  /* If the clicked element is not a checkbox,
      then force the check via jquery
  */
  if (e.target.type !== 'checkbox') {
    $(this).find('input').prop('checked', !$(this).find('input').prop('checked'))
  }
    // Display checked status after click
  $('#wraper .msg').text(`Checkbox status is ${$('#row [type="checkbox"]').get(0).checked}`);
  
});


$("#checkbox-test").change(function() {
  $('#wraper .msg').text(`Checkbox status is ${this.checked}`);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wraper"></div>

推荐阅读