Question

我的表格中有几行，格式如下，

<tr class = "parent">
    <td class = "first"> asdf </td>
    <td class> qwerty </td>
    <td class> zxcv </td>
    <td class> 1234 </td>
</tr>

当我点击“asdf”时执行操作A，当单击该行的其余任何一个子项时，我想执行操作B.我写道，

//Action A
$('.first').live('click', function() { console.log('first clicked'); });

//Action B
$('.parent').children().not('.first').live('click', function() { console.log('others clicked'); });

由于某种原因，Action B的代码无效。我需要两个动作的“实时”附件，因为可以添加/删除行。

我该怎么办？

Answer 1

<table>
  <tr class="parent">
    <td class="first"> asdf </td>
    <td class> qwerty </td>
    <td class> zxcv </td>
    <td class> 1234 </td>
  </tr>
</table>

$('tr.parent').find('td').live('click', function(){
    if ($(this).is('.first')) {
        console.log('Has .first.');
    } else {
        console.log('Does not have .first.');
    }
});

http://jsfiddle.net/GnX4L/

也许是更好的方式：

$('tr.parent').find('td').live('click', function(){
    if ($(this).is(':first-child')) {
        console.log('Is first child.');
    } else {
        console.log('Not first child.');
    }
});

http://jsfiddle.net/GnX4L/1/

Answer 2

$(".parent td").live('click',function() {

if($(this).attr("class") == "first"){
  console.log('first clicked');
}else{
  console.log('every thing else clicked');
}

});

我认为这应该有用

Answer 3

$(".parent").delegate(".first", "click", function() {
    console.log("A");
}).delegate(":not(.first)", "click", function() {
    console.log("B");
});

http://jsfiddle.net/GnX4L/2/

Answer 4

使用hasClass并且不使用find（），浪费处理器能力： - ）

$(".parent td").live('click',function() {

    if($(this).hasClass("first"){
      console.log('first clicked');
    }else{
      console.log('every thing else clicked');
    }

});

仅将Click事件处理程序添加到某些子项

4 个答案: