Click event is getting triggered twice in a table

Question

I have a table with two columns named name and attendance which is a radio button and I want to implement that whenever I click on a row I get the value of name and attendance of that row. The problem is that whenever I clicked on a row the event is triggering twice and showing the name twice. I have added the code below


    
        Name
        Attendance

    
    
        Md. Khairul Basar
        
            
                
                    
                    
                    Present
                
            
            
                
                    
                    
                    Absent

Following is the jQuery code.

I have followed other answers related to this problem and added their solution like adding .off("click") and

e.preventDefault();
e.stopImmediatePropagation();

But none of these is working and moreover using .preventDefault() is disabling the checked option in radio button. Please help me with the code.

user_9695286 · Answer

Update you click event like below:

$(".table_attendance").on('click', 'input', function(e) {

You can try it below:

$(document).ready(function() {  
  $(".table_attendance").on('click', 'input', function(e) {
    var attendance = {
      name: $(this).closest("tr").find("td:nth-child(1)").text()
    };
    console.log(attendance);
  });
});



  
    Name
    Attendance

  
  
    Md. Khairul Basar
    
      
        
                        
                        
                        Present
                    
      
      
        
                        
                        
                        Absent

user_6299088 · Answer

Just add input:

Bind the click event to the input rather than the . When the is clicked - the event will still occur because, a click on the triggers a click on the input. This will allow the to hold its normal functionality.

Click event Bubbles, now what is meant by bubbling,

Refer: What is event bubbling and capturing?

 $(document).ready(function () {
        $(".table_attendance").on('click','input', function () {
            console.log('clicked');
            var attendance = {
              name: $(this).closest("tr").find("td:nth-child(1)").text()
            }
        });
    });



    
        Name
        Attendance

    
    
        Md. Khairul Basar
        
            
                
                    
                    
                    Present
                
            
            
                
                    
                    
                    Absent

user_3860531 · Answer

$(document).ready(function() {  
  $(".table_attendance input").on('click',function(e) {
    var attendance = {
      name: $(this).closest("tr").find("td:nth-child(1)").text()
    };
    console.log(attendance);
  });
});



  
    Name
    Attendance

  
  
    Md. Khairul Basar
    
      
        
                        
                        
                        Present
                    
      
      
        
                        
                        
                        Absent

This will also work $(".table_attendance input") will select all the input under table_attendance class.

user_9532612 · Answer

you can also try this one

user_5680730 · Answer

I have added input[name=exampleRadio]:checked to insure that events should be fire only on click on name=exampleRadio radio button

 $(document).ready(function () {
        $(".table_attendance").on('click','input[name=exampleRadio]:checked', function () {
            var attendance = {
              name: $(this).closest("tr").find("td:nth-child(1)").text()
            }
                    alert(attendance)
        });

    });



    
        Name
        Attendance

    
    
        Md. Khairul Basar
        
            
                
                    
                    
                    Present
                
            
            
                
                    
                    
                    Absent

user_10555874 · Answer

change:

change:
  $(document).ready(function () {
        $("#tr_name_attendance").on('click', function () {
            var name = {
                nm: $(this).closest("tr").find("td:nth-child(1)").text()
            }
            var attendance = {
                attend: $(this).closest("tr").find("td:nth-child(2)").text()
            }
            alert(name.nm);
            alert(attendance.attend);
        });
    });

Click event is getting triggered twice in a table

6 Answers