0

クリックするとイベントをトリガーするテーブル行があります。行内に（表示されていない）チェックボックスとそのスタイル付きラベルがあります。

私が欲しいのは、チェックボックス/ラベルがクリックされた場合に実行を防ぐことです（：notまたは.not（）で推測しますが、それを理解することはできません）。

HTML：

<center>
<table>
    <tr class='pend'>
        <td><input type="checkbox" id="bb"/> <label for="bb">X</label></td>
        <td>&nbsp;</td>
        <td>some text</td>
    </tr>
</table>
</center>

CSS：

center {
margin-top:20px;
}

input[type=checkbox] + label {
    width:10px;
    height:10px;
    background-color:red;
}

input[type=checkbox] {
    display:none;
}

table tr {
height:40px;
    background-color:gray;
}

table td {
padding:5px;
}

JS：

$('.pend').on('click',function(){
    $(this).append('text');
    return false;
})

JSFIDDLE： http: //jsfiddle.net/ySuGB/2/

4

4 に答える 4

2

チェックボックス/ラベルをクリックしたときのイベントのバブリングを防ぐ必要があります。

下記参照、

//                     V-- Is the TD containing the checkbox and the label.
$('.pend :checkbox').parent().on('click', function(event) {
    event.stopPropagation()
});

デモ：http： //jsfiddle.net/ySuGB/12/

于 2012-09-14T21:42:34.870 に答える
1

e.stopPropagation() が必要です。

http://jsfiddle.net/jNDYJ/

$('.pend input:checkbox').add('.pend label[for=bb]').click(function(e){
    e.stopPropagation();
});
于 2012-09-14T21:43:35.517 に答える
0

イベント ターゲットがラベル (など) であるかどうかを確認できます。

$('.pend').on('click',function(e){
  if(e.target.tagName=='LABEL')
    return false;
  $(this).append('text');
  return false;
})​

http://jsfiddle.net/ySuGB/9/

于 2012-09-14T21:43:00.000 に答える
0 
$('.pend').on('click',function(){
    var $this = $(this);
    $this.off('click');
    $this.find('td:eq(2)').append('text');
})​
于 2012-09-14T21:43:48.093 に答える