CODEWITHSUNDEEP
jquery
caradrye
caradrye

Reputation: 497

using .not() with .click() to ignore class

I have a table with a checkbox in each row. I want to do a .click function that happens when I click anywhere on the tr other than the checkbox.

The rows have class="message" and the td that contains the checkbox has class="ignore_checkbox".

this is my jquery/js:

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

but it still calls respondToMessage function when I click the checkbox. Any ideas?

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

Upvotes: 1

Views: 115

Answers (5)

Sushanth --
Sushanth --

Reputation: 55750

Try this

$('.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

Upvotes: 0

Jose Faeti
Jose Faeti

Reputation: 12314

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

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

As always I would suggest to use only one event listener to the element, which will be able to listen to the click event on every row it contains. This way you save resources and need only one single event listener for everything.

Check the fiddle here.

Upvotes: 0

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79860

You should do a e.stopPropagation on the td containing checkbox as on clicking the td will bubble the event up to TR

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

or you can handle it inside .message handler like in other answers.

Upvotes: 1

j08691
j08691

Reputation: 208040

Simply add the td to your existing rule like:

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

Your idea of using .not() works but it only works on matching elements. Since your rule starts at the table row <tr>, the .not() doesn't match anything. By instead matching on the table cells <td> it works fine.

Here's a quick jsFiddle example.

Upvotes: 2

Tasso Evangelista
Tasso Evangelista

Reputation: 1632

Try use event bubbling.

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

Upvotes: 0

Related Questions