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.

I can see it is working fine for me but I found an error due to selector 'find("td:nthchild(1)")' it should 'find("td:nth-child(1)")'. — Hanif, Oct 25 '18 at 06:13
It was a typo. Originally I have 'find("td:nth-child(1)")'. But its not working for me — Tasfia Sharmin, Oct 25 '18 at 06:15
what actually do you want with the click on whole td, is there possibility to only click on input. $(".table_attendance input") — Muhammad Adnan, Oct 25 '18 at 06:38
I had the similar issue, in my case it was the script file attached multiple times on the same page. — Rafi, Jan 19 '20 at 07:42
adding this two calls `e.preventDefault();` and `e.stopImmediatePropagation();` solved my problem. thanks — M.J.Ahmadi, Apr 06 '21 at 05:05

score 5 · Accepted Answer · answered Oct 25 '18 at 06:23

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>

Thanks a lot. It's working.Can you explain please why the previous one is not working? — Tasfia Sharmin, Oct 25 '18 at 06:27
@TasfiaSharmin You need to go thru this https://javascript.info/bubbling-and-capturing — Ritesh Waghela, Oct 25 '18 at 06:29
Actually it was firing event for click on `label` and `input` both elements. With using `.on('click', 'input'` it will only fire on input is clicked. Ultimately click on label or span will automatically trigger input click so it will work fine. — Karan, Oct 25 '18 at 06:30
@TasfiaSharmin this happens because of event bubbling check my answe below — Dinesh Ghule, Oct 25 '18 at 06:33

score 2 · Answer 2 · edited Oct 25 '18 at 06:57

Just add input:

Bind the click event to the input rather than the <td>. When the is clicked - the event will still occur because, a click on the <td> triggers a click on the input. This will allow the <td> 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()
            }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

@Tasfia this happens because of event bubbling – Dinesh Ghule Oct 25 '18 at 06:33 — Dinesh Ghule, Oct 25 '18 at 06:33

score 1 · Answer 3 · answered Oct 25 '18 at 06:36

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

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

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

score 1 · Answer 4 · answered Oct 25 '18 at 06:57

you can also try this one
<script>
    $(document).ready(function () {

        $(".table_attendance input[type='radio']").click( function()
        {

          var attendance = {
          name: $(this).closest("tr").find("td:nth-child(1)").text()
        };
        console.log(attendance);
    });

});
//result {name: "Md. Khairul Basar"}

</script>

score 0 · Answer 5 · answered Oct 25 '18 at 06:33

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

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

score 0 · Answer 6 · answered Oct 25 '18 at 06:54

change:
<tr class="" data-id='1' id="tr_name_attendance">
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 Answers6