jQuery click event triggered twice when clicking on Checkbox

Question

I'm playing around with DataTables and I have a table like this :

<table id='dt'>
    <thead><!-- Some Header --></thead>
    <tbody>
        <tr data-lineid=1>
            <td><input type='checkbox' class='checked_entry' id='checked_1'></td>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
        <!-- Rest of the table -->
    </tbody>
</table>

What I am trying to do is to be able to click everywhere in the row, and it will select the checkbox of this row :

$('#dt tbody').on('click', 'tr', function() {
    var id = $(this).data('lineid');
    if ($('#checked_'+id).prop('checked')) {
        $('#checked_'+id).prop('checked', false);
    } else {
        $('#checked_'+id).prop('checked', true);
    }
});

This is working fine, except that now, when I'm clicking on the checkbox itself, it seems it triggers the checkbox click event plus the event bound on the tr.

I've tried something like :

$('#dt tbody').on('click', 'tr :not(input)', function() { ... });

But this seems not to work.

Could anyone give me a tip on this please ?

Thanks !

Rajaprabhu Aravindasamy · Accepted Answer · 2014-06-19 08:31:25Z

3

Try to exit the tr click event whenever the user is making a click on checkbox,

$('#dt tbody').on('click', 'tr', function(e) {
    if($(e.target).is('input')) { return; }
    var id = $(this).data('lineid');
    if ($('#checked_'+id).prop('checked')) {
        $('#checked_'+id).prop('checked', false);
        // ... and some other stuff
    } else {
        $('#checked_'+id).prop('checked', true);
        // ... and some other stuff
    }
});

answered Jun 19, 2014 at 8:31

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2014-06-19 08:33:15Z

2

It is because the click event on the checkbox itself is propagated. As a solution you can check whether the actual click target was the checkbox in that case don't do anything in the click handler.

$('#dt tbody').on('click', 'tr', function (e) {
    if (!$(e.target).is('input:checkbox')) {
        $(this).find('input:checkbox').prop('checked', function (i, checked) {
            return !checked;
        })
    }
});

Demo: Fiddle

answered Jun 19, 2014 at 8:33

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Rory McCrossan · Accepted Answer · 2014-06-19 08:42:20Z

2

Firstly, remove the iterative identifier you don't need it; at least not solely for identifying the row containing a checkbox.

<table id='dt'>
    <thead><!-- Some Header --></thead>
    <tbody>
        <tr>
            <td><input type='checkbox' class='checked_entry' /></td>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
    </tbody>
</table>

Then in jQuery you can attach your event to the tr using traversal to find the related checkbox, and also use stopPropagation() on the click of the checkbox to stop the event being caught twice.

$('#dt tbody').on('click', 'tr', function() {
    var $checkbox = $(this).find(':checkbox');
    $checkbox.prop('checked', !$checkbox.prop('checked'));
});
$('#dt input:checkbox').click(function(e) {
    e.stopPropagation();
});

Example fiddle

edited Jun 19, 2014 at 8:42

answered Jun 19, 2014 at 8:37

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

3 Comments

BMN Over a year ago

I need the identifier for other purposes that I didn't paste here. Thanks for the answer though.

Rory McCrossan Over a year ago

Fair point. It can easily be added back in, but you don't require it for checking/unchecking the boxes of a related tr

BMN Over a year ago

Sure, no excuses on that :) I'll use your solution to check/uncheck ! Thank you.

T.S. · Accepted Answer · 2014-06-19 08:32:59Z

1

You could make sure the click event doesn't propagate to the row element when you click the checkbox like this:

$('#dt tbody input').on('click', function(e) { e.stopPropagation(); });

answered Jun 19, 2014 at 8:32

T.S.

1,25213 silver badges23 bronze badges

Comments

sudhansu63 · Accepted Answer · 2014-06-19 08:32:06Z

0

You can try this.

$('#dt tbody').on('click', 'tr', function(event) {
    var id = $(this).data('lineid');
    if ($('#checked_'+id).prop('checked')) {
        $('#checked_'+id).prop('checked', false);
    } else {
        $('#checked_'+id).prop('checked', true);
    }
      event.preventDefault();
});

answered Jun 19, 2014 at 8:32

sudhansu63

6,2204 gold badges41 silver badges55 bronze badges

Comments

Amin Jafari · Accepted Answer · 2014-06-19 08:33:32Z

0

$('#dt tbody').on('click', 'tr', function(e) {
    e.preventDefault();
    var id = $(this).data('lineid');
    if ($('#checked_'+id).prop('checked')) {
        $('#checked_'+id).prop('checked', false);
    } else {
        $('#checked_'+id).prop('checked', true);
    }
});

answered Jun 19, 2014 at 8:33

Amin Jafari

7,2153 gold badges21 silver badges44 bronze badges

Comments

Innovation · Accepted Answer · 2015-10-27 10:37:59Z

0

As you already have table row click event.It will also be fired when checkbox click and here you are changing the state of checkbox in your click event.So it is better to preventDefault() event of checkbox.A better solution would be:

$('#dt tbody').on('click', 'tr', function(e) {
e.preventDefault();
var id = $(this).data('lineid');
if ($('#checked_'+id).prop('checked')) {
    $('#checked_'+id).prop('checked', false);
    // ... and some other stuff
} else {
    $('#checked_'+id).prop('checked', true);
    // ... and some other stuff
}
});

answered Oct 27, 2015 at 10:37

Innovation

1,53417 silver badges32 bronze badges

Collectives™ on Stack Overflow

jQuery click event triggered twice when clicking on Checkbox

7 Answers 7

Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related