javascript - Click event is getting triggered twice in a table

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.

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

Share Improve this question edited Oct 25, 2018 at 8:53 user6299088 asked Oct 25, 2018 at 6:03 Tasfia Sharmin 4092 gold badges9 silver badges23 bronze badges

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 Commented Oct 25, 2018 at 6:13
1 It was a typo. Originally I have 'find("td:nth-child(1)")'. But its not working for me – Tasfia Sharmin Commented Oct 25, 2018 at 6: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 Commented Oct 25, 2018 at 6:38
I had the similar issue, in my case it was the script file attached multiple times on the same page. – Rafi Commented Jan 19, 2020 at 7:42
adding this two calls e.preventDefault(); and e.stopImmediatePropagation(); solved my problem. thanks – M.J.Ahmadi Commented Apr 6, 2021 at 5:05

Add a ment |

6 Answers 6

Sorted by: Reset to default 5

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

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

$(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./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.

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>

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Click event is getting triggered twice in a table - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)