Question

我有一张桌子,每个行都有一个检查箱,作为头几个项目(在箱子里思考电子邮件)。 The <tr> of that row has a hover and Point eventhandler subject to it.

我想要的是,当用户在检查箱上点击时,检查箱就会被检查,而所有检查箱都是这样。当用户点击行的其他地方时,它应当做其他事情。我正试图通过研究通过的活动的<代码>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/jLG00/KEu3a/。

Answer 2

try

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

友情链接