javascript - 尝试突出显示元素并同时选中复选框时出现jQuery单击事件/事件冒泡问题

Question

请看看这个小提琴：http: //jsfiddle.net/mrmartineau/53fkV/embedded/result/

预期的结果是，当单击 a 时.poll_option td，背景颜色变为粉红色并选中复选框。每个选项都有不同的错误，它们是：

选项 1： 我遇到的问题是，在选项 1 上，当我单击复选框本身时，它不会检查，但其他一切正常。我的意思是当我点击标签时<td>，结果是正确的。似乎事件没有正确冒泡..

选项 2： 对于这个，我尝试了另一种解决方案（删除了 .toggle() 方法）并试图找出实际单击的元素（console.log(e.target.nodeName);），现在我可以单击复选框但不能单击标签，而不是标签没有使活动发挥作用。

你能否看看我的代码并看看我哪里出错了，因为我确信它不会这么难......

干杯

Answer 1

建议的更简单的解决方案：

$('.poll_option.one td').click(function (e) {
    $(this).toggleClass('highlight');
    $(this).find('input').prop("checked", $(this).hasClass("highlight"));
    console.log(e.target.nodeName);

// weird that clicking the label does not naturally propagate
// the click event to the parent
}).find("label").click(function () {
    $(this).closest("td").click();                
});

​<a href="http://jsfiddle.net/53fkV/12/" rel="nofollow">演示。