表格中的两次点击事件被触发

Question

我有一个表，该表具有名为 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();

但是这些都不起作用，而且使用.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

只需添加输入：

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

点击事件冒泡，现在是冒泡的意思

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

$(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")将选择table_attendance类下的所有输入。

Answer 4

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>

Answer 5

我添加了<Button ToolTip="My doodad"> <Viewbox Width="16" Height="16" Margin="2"> <Image Source="pack://application:,,,/Resources/png/mydoodad.png"></Image> </Viewbox> </Button> 以确保仅在点击SvgViewbox时才会触发事件

input[name=exampleRadio]:checked

name=exampleRadio radio button

Answer 6

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