使用事件通过jQuery修改元素

我设置了一个表格，每行都有一个复选框，作为Gmail收件箱中的第一项。该行的具有绑定到该行的悬停和单击事件处理程序

我希望发生的是，当用户单击复选框时，复选框变成选中状态，仅此而已。当用户单击行中的任何其他位置时，它应该执行其他操作。我试图通过查看正在通过的事件的event.target并查看这是否是复选框来实现这一点。但是，在我当前的实现中，当用户单击复选框时，什么也不会发生，当他们单击行中的任何其他位置时，它的行为与我期望的一样

关于复选框，我做错了什么

这是我的密码：

$('.navTable > tbody > tr').hover(function() {

if (!$(this).children('td').hasClass('spacer') && !$(this).children('th').length > 0)
    $(this).css({background : "#EFEFEF", border : "1px solid #CCC"});
},function() {
    $(this).css({background : "", border : ""});
}).click(function(e) {
    console.log(e);
    if(e.target.attributes[0].nodeValue == "checkbox") {
        // Check the checkbox
        $("#"+e.target.id).attr('checked', 'checked');
    } else {
        // Do something else
    }
    return false;
});

---

感谢您提供的任何帮助。

为什么不为复选框和行中的其他位置创建单独的单击处理程序：

$('.navTable > tbody > tr input').click(function(e) {
    // do whatever you want here
    e.stopPropagation();
    alert("click checkbox");
})

$('.navTable tr').click(function(e) {
    // click in a row, that's not in the checkbox
    alert("click row");
})

这里的例子：。

试试看

$('.navTable tr').hover(function() { 
    if (!$(this).children('td').hasClass('spacer') && !$(this).children('th').length > 0) 
    $(this).css({background : "#EFEFEF", border : "1px solid #CCC"}); 
    },function() { 
            $(this).css({background : "", border : ""}); 
    }).closest('table')
        .delegate(':checkbox', 'change',function() { 
            var $checkbox = $(this),
            $td = $checkbox.closest('td'),
            $tr = $td.closest('tr');

        //If its not checked do something else.
        if($checkbox.not(':checked')) { 
      // Do something else 
    } 
    return false; 
}); 

---

啊，这似乎是一个更好的解决方案。不过，我想知道为什么我的方法不起作用？编辑：事实上，现在我已经试过了，你的方法似乎也不起作用。有什么建议吗？对我来说很有用。我做了一些编辑，所以请确保您尝试最新版本。如果它对你不起作用，那么请在你的问题中发布你尝试过的代码和HTML。如果实现正确，这在概念上是可行的。您可以在JSFIDLE中看到它。