jQuery 处理嵌套在 <li> 和 <a> 元素内的复选框的点击事件，同时让父 <ul> 打开

Question

这似乎是一个简单的问题，但让我很沮丧。我希望能够在不折叠列表的情况下单击包含复选框的下拉列表中的多个项目。我在 ul、li 和 a 元素上尝试了各种事件处理程序，但没有成功。这些包括 e.preventDefault()、e.stopPropogation()，并根据 this 答案阻止通过 'hide.bs.dropdown' 事件关闭 ul。

我的清单项目：

<li class="serviceListItem">
  <a class="serviceListItemLink">
    <input class="checkService" type="checkbox" value="">
  </a>
</li>

和我当前的事件处理程序集。我已经尝试了这些的大多数组合。

$('#serviceDropdown').on('hide.bs.dropdown', function() {
  return false;
});

$('.serviceListItemLink').click(function(e) {
  console.log('you clicked a service');
  e.stopPropogation();
  e.preventDefault();
});
$('.serviceListItem').click(function(e) {
  e.stopPropogation();
  e.preventDefault();
});

我应该添加我的 UL 具有 #servicesDropdown ID。提前感谢您的所有帮助。

Answer 1

这是您试过的代码吗？在这种情况下，您拼错了 "propagation".

应该是：

e.stopPropagation();

...而不是：

e.stopPropogation();

jQuery 处理嵌套在 <li> 和 <a> 元素内的复选框的点击事件，同时让父 <ul> 打开

jQuery handling of click event on checkbox nested inside <li> and <a> elements while leaving parent <ul> open

html

javascript

jquery

event-handling