on click event of checkbox called when clicked 2nd time using jquery

Question

I wrote this code

   $(document).on("click", "#tasksTable tr", function(e) {
       var taskId = this.id;
       var chkBoxCompleted = $(this).find('input:checkbox:first');
       var chkBoxNotRequired = $(this).find('input:checkbox:last');

       chkBoxCompleted.on('click', function(){
           alert("called when I click second time on checkbox")
       });

       chkBoxNotRequired .on('click', function(){
           alert("called when I click second time on checkbox")
       });
    });

and my html is like

<table width="100%"  cellpadding="0" cellspacing="0" style="border-width: 0px 1px 1px 0px;" id="tasksTable">
   <tr id="9">
   <td class="blueFont_inset"><span>22/05/2014 00:48</span>&nbsp;</td>
   <td class="blueFont_inset"><input type="checkbox" name="completedTask[]"  id="completedTask" value="N"><span>&nbsp;</span></td>
   <td class="blueFont_inset"><span>Completed Date</span>&nbsp;</td>
   <td class="blueFont_inset"><input type="checkbox" name="notRequiredTask[]" id="notRequiredTask" value="N"><span>&nbsp;</span></td>
  </tr>
</table>

These are multiple rows inside this table.

Click event of checkbox called when I click any of the checkbox second time. I tried it in IE and Chrome. Is this because I am using it inside table row click event? But I want to use that table row click event too.

I am using

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>

Event handlers inside event handlers will do that, and it's not even the right event handlers, you should be using the change event, and not nest them. — adeneo
– adeneo, Commented May 28, 2014 at 14:34
Um, every time you click on the row, you will be adding clicks, that is a bad idea. — epascarello
– epascarello, Commented May 28, 2014 at 14:39

Ken Wheeler · Accepted Answer · 2014-05-28 14:37:48Z

1

Your first click event is being intercepted by the click listener on the TR. Rather than using a click binding to bind events to the inner elements, I would bind it all on document.ready and make all references relative to the clicked elements parent scope.

answered May 28, 2014 at 14:37

Ken Wheeler

1,95813 silver badges12 bronze badges

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

7 Comments

Harry Over a year ago

Can you please elaborate it how I can write them separately.. thanks

Ken Wheeler Over a year ago

Change the ID's to classes (ie: completedTask), and bind the events directly to them. If you need the row ID, inside of your click event callbacks, find $(this).parents('tr').attr('id') to get it.

Ken Wheeler Over a year ago

It looks like he is already using delegate syntax on the parent row binding

Harry Over a year ago

you mean I should write it like '$(document).on("click", "#tasksTable tr .completedTask", function(e) ' if I change id to classes. it still not working

Harry Over a year ago

I don't need rows. Rows are already there. I just displayed one row to save space.

|

Boopathi Sakthivel · Accepted Answer · 2014-05-28 15:02:39Z

0

Try to remove check box click handlers before bind again otherwise click event is binding again and again while click event is propagated to tr.

Ref: http://api.jquery.com/off/

Better avoid binding event handlers with in parent event handler.

answered May 28, 2014 at 15:02

Boopathi Sakthivel

751 silver badge8 bronze badges

Collectives™ on Stack Overflow

on click event of checkbox called when clicked 2nd time using jquery

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related