使用事件使用 jQuery 修改元素答案

【问题标题】：Modifying Element with jQuery using Event使用事件使用 jQuery 修改元素
【发布时间】：2011-10-12 19:13:59
【问题描述】：

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

我想要发生的是，当用户点击复选框时，复选框会被选中，仅此而已。当用户单击行中的其他任何位置时，它应该执行其他操作。我试图通过查看正在传递的事件的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;
});

感谢您提供的任何帮助。

【问题讨论】：

标签： jquery events dom

【解决方案1】：

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

$('.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");
})

此处的示例：http://jsfiddle.net/jfriend00/KEu3a/。

【讨论】：

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

【解决方案2】：

试试

$('.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; 
});

【讨论】：