Question

我有一个表格，每行都有一个复选框。我想做一个.click函数，当我点击除了复选框之外的其他任何地方时会发生。

行有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; ?>

Answer 1

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

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

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

这是一个快速 jsFiddle example 。

Answer 2

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

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

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

Answer 3

试试这个

$（'。message'）。on（'click'，function（e）{

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

}）;

<强> Check FIDDLE

Answer 4

$('.message').click(function(event) {

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

与往常一样，我建议只对该元素使用一个事件监听器，该监听器将能够在其包含的每一行上侦听click事件。通过这种方式，您可以节省资源，并且只需要一个事件监听器即可。

Check the fiddle here.

Answer 5

尝试使用事件冒泡。

$('.message').on('click', ':not(.ignore_checkbox)', function(event) {
// enter code here
});

使用.not（）和.click（）忽略类

5 个答案: