1

我有一个表格，每行都有一个复选框。我想做一个 .click 函数，当我单击 tr 上除复选框之外的任何位置时会发生该函数。

行有 class="message"，包含复选框的 td 有 class="ignore_checkbox"。

这是我的 jquery/js：

$('.message').not('.ignore_checkbox').click(respondToMessage);

但是当我单击复选框时，它仍然会调用 respondToMessage 函数。有任何想法吗？

<?php foreach ($accountMessages as $accountMessage): ?>
<tr class="message overview">
    <td class="ignore_checkbox" ><?php echo $this->Form->checkbox(
        'AccountMessages.'.$accountMessage['AccountMessage']['id'], 
        array('value' => $accountMessage['AccountMessage']['id'],
        'hiddenField' => false,
        'multiple' => true)); ?>
    </td>
    <td>
        <strong><?php echo h($accountMessage['Account']['email']);?></strong><br/>
        <span class="message_time"><?php echo $this->Time-                      TimeAgoInWords($accountMessage['AccountMessage']['created'], array('format' => 'F jS, Y', 'end' => '+1 year') )?></span>
        <?php echo h($accountMessage['AccountMessage']['title']); ?><br/>
        <?php echo h($accountMessage['AccountMessage']['message']); ?>

    </td>
</tr>
<?php endforeach; ?>
4

5 回答 5

2

只需将其添加td到您现有的规则中，例如：

$('.message td').not('.ignore_checkbox').click(respondToMessage);

您使用的想法.not()有效，但它仅适用于匹配元素。由于您的规则从表格 row 开始<tr>，因此.not()不匹配任何内容。通过在表格单元格上进行匹配，<td>它可以正常工作。

这是一个快速的jsFiddle 示例。

于 2012-10-26T17:12:29.427 回答
1

您应该e.stopPropagation在包含 td 的复选框上执行一个操作，因为单击 td 会将事件冒泡到TR

$('.ignore_checkbox').click (function (e) {
   e.stopPropagation();
});

或者您可以.message像在其他答案中一样在处理程序中处理它。

于 2012-10-26T17:09:19.257 回答
0

试试这个

$('.message').on('点击', function(e) {

if( e.target.className.indexOf('ignore_checkbox') > -1 
     || e.target.type == 'checkbox'){
       // do Nothing
 }
else{
     alert('Not checkbox');
}

});​</p>

检查小提琴

于 2012-10-26T17:09:17.163 回答
0 
$('.message').click(function(event) {

    if ( ! $(event.target).hasClass('ignore_checkbox') )
    {
        respondToMessage();
    }
});

与往常一样，我建议只对元素使用一个事件侦听器，该事件侦听器将能够侦听它包含的每一行的点击事件。通过这种方式，您可以节省资源并且只需要一个事件侦听器即可完成所有操作。

在这里检查小提琴。

于 2012-10-26T17:10:51.487 回答
0

尝试使用事件冒泡。

$('.message').on('click', ':not(.ignore_checkbox)', function(event) {
// enter code here
});
于 2012-10-26T17:11:48.147 回答