单击事件在 table 中被触发两次

Question

我有一个 table，其中有两列名为 name 和 attendance，这是一个单选按钮，我想实现每当我点击一行时，我都会得到该行的姓名和出勤率的值。问题是每当我单击一行时，事件都会触发两次并显示两次名称。我在下面添加了代码

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

以下是 jQuery 代码。

<script>

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

</script>

我关注了与此问题相关的其他答案并添加了他们的解决方案，例如添加 .off("click") 和

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

但是其中 none 有效，而且使用 .preventDefault() 会禁用单选按钮中的选中选项。请帮我看看代码。

Answer 1

更新您的点击事件如下：

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

您可以在下面尝试：

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

Answer 2

只需添加输入：

将点击事件绑定到输入而不是 <td>。单击时 - 事件仍会发生，因为单击 <td> 会触发对输入的单击。这将使 <td> 保持其正常功能。

点击事件Bubbles,现在冒泡是什么意思,

参考： 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>

Answer 3

我添加了 input[name=exampleRadio]:checked 以确保仅在单击 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>

Answer 4

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

这也行 $(".table_attendance input") 将 select table_attendance class 下的所有输入。

Answer 5

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

Answer 6

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>

单击事件在 table 中被触发两次

Click event is getting triggered twice in a table

javascript

jquery

click

onclick