Question

您好，我知道周围几乎没有相同的问题，但我找不到给出答案的解决方案，所以我第一次在这里发帖。

我里面有简单的li和标签

<li class="task">
    <input type="checkbox" id="task-1" />
    <label for="task-1">Random text></label>
</li>

我的触发“完成”类的jQuery是：

$(".task").click(function (e) {
    var cb = $(this).find(":checkbox")[0];
    if (e.target != cb) cb.checked = !cb.checked;
    $(this).toggleClass("done", cb.checked);
});

这实际上在单击复选框或li背景时工作正常，但在单击标签时不起作用。

我的另一个jQuery在单击复选框和标签时起作用，但在背景上不起作用是：

$(".task input").change(function () {
    $(this).closest('.task').toggleClass('done', $(this).is(':checked'));
});

如何在点击li的复选框，标签或背景时创建将激活事件的jQuery？谢谢你，并在发布任何错误时感到抱歉。

小提琴：https://jsfiddle.net/0j7e69o1/2/

Answer 1

这是因为标签具有默认点击功能，这意味着它将焦点放在具有其for属性中引用的ID的元素上。单击时就是这样做的。

您可以删除for属性来解决此问题，如下例所示：

https://jsfiddle.net/0j7e69o1/3/

首选：另一种解决方案是使用javascript阻止默认点击：

$('.tasks label').click(function(e) { e.preventDefault(); } );

这里我们将click事件绑定到tasks元素中的每个标签，并使用preventDefault()（more here）来停止发生默认事件。这是首选，因为它保留了标记，其中有用的for属性完整无缺！

https://jsfiddle.net/0j7e69o1/5/

单击<li>背景，复选框和标签时触发事件

1 个答案: