Question

我有一个表设置，每行都有一个复选框作为行中的第一项（想想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;
});

感谢您提供任何帮助。

Answer 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/。

Answer 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; 
});

使用Event使用jQuery修改元素

2 个答案: