title: Click event is getting triggered twice in a table
body: <p>I have a table with two columns named <strong>name</strong> and <strong>attendance</strong> 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</p>
  
  <pre><code>&lt;table class="col-md-12 text-center"&gt;
      &lt;tr&gt;
          &lt;th class="text-center"&gt;Name&lt;/th&gt;
          &lt;th class="text-center"&gt;Attendance&lt;/th&gt;
  
      &lt;/tr&gt;
      &lt;tr class="" data-id='1'&gt;
          &lt;td&gt;Md. Khairul Basar&lt;/td&gt;
          &lt;td class="form-inline table_attendance"&gt;
              &lt;div class="form-check form-check-radio"&gt;
                  &lt;label class="form-check-label"&gt;
                      &lt;input class="form-check-input" type="radio" name="exampleRadio"
                             id="exampleRadios1" value="option1"&gt;
                      &lt;span class="form-check-sign"&gt;&lt;/span&gt;
                      Present
                  &lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="form-check form-check-radio"&gt;
                  &lt;label class="form-check-label"&gt;
                      &lt;input class="form-check-input" type="radio" name="exampleRadio"
                             id="exampleRadios2" value="option2" checked&gt;
                      &lt;span class="form-check-sign"&gt;&lt;/span&gt;
                      Absent
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Following is the jQuery code.</p>
  
  <pre><code>&lt;script&gt;
  
      $(document).ready(function () {
          $(".table_attendance").on('click', function () {
              var attendance = {
                name: $(this).closest("tr").find("td:nth-child(1)").text()
              }
          });
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I have followed other answers related to this problem and added their solution like adding <code>.off("click")</code> and </p>
  
  <pre><code>e.preventDefault();
  e.stopImmediatePropagation();
  </code></pre>
  
  <p>But none of these is working and moreover using <code>.preventDefault()</code> is disabling the checked option in radio button. Please help me with the code.</p>