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

<table class="col-md-12 text-center">
    <tr>
        <th class="text-center">Name</th>
        <th class="text-center">Attendance</th>

    </tr>
    <tr class="" data-id='1'>
        <td>Md. Khairul Basar</td>
        <td class="form-inline table_attendance">
            <div class="form-check form-check-radio">
                <label class="form-check-label">
                    <input class="form-check-input" type="radio" name="exampleRadio"
                           id="exampleRadios1" value="option1">
                    <span class="form-check-sign"></span>
                    Present
                </label>
            </div>
            <div class="form-check form-check-radio">
                <label class="form-check-label">
                    <input class="form-check-input" type="radio" name="exampleRadio"
                           id="exampleRadios2" value="option2" checked>
                    <span class="form-check-sign"></span>
                    Absent
                </label>
            </div>
        </td>
    </tr>
</table>

Following is the jQuery code.

<script>

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

</script>

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.

Answer 1

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);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="col-md-12 text-center">
  <tr>
    <th class="text-center">Name</th>
    <th class="text-center">Attendance</th>

  </tr>
  <tr class="" data-id='1'>
    <td>Md. Khairul Basar</td>
    <td class="form-inline table_attendance">
      <div class="form-check form-check-radio">
        <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="exampleRadio"
                               id="exampleRadios1" value="option1">
                        <span class="form-check-sign"></span>
                        Present
                    </label>
      </div>
      <div class="form-check form-check-radio">
        <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="exampleRadio"
                               id="exampleRadios2" value="option2" checked>
                        <span class="form-check-sign"></span>
                        Absent
                    </label>
      </div>
    </td>

  </tr>
</table>