javascript - jquery 事件在单击时触发两次

Question

我正在使用一个 Web 应用程序，在该应用程序中我正在对 HTML 表格行进行重新排序，并在单击带有类的项目时看到该应用程序。该事件已触发两次，但我不知道如何触发。

如果有人能够让我知道如何阻止这种行为，我将不胜感激，因为这将创建一个 AJAX 调用并将数组传递回后面的代码，但我只需要并希望它触发一次。

$('table').on('click', ".up,.down,.top,.bottom", function() {

  console.log("up or down arrow clicked");

  var row = $(this).parents("tr:first");
  if ($(this).is(".up")) {
    if (row[0].rowIndex > 1) {
      row.insertBefore(row.prev());
    }
  } else if ($(this).is(".down")) {
    row.insertAfter(row.next());
  } else if ($(this).is(".top")) {
    row.insertBefore($("table tr:first"));
    row.insertAfter(row.next());
  } else {
    row.insertAfter($("table tr:last"));
  }

  //... more code here

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<table>
  <tr id="sectionRow_1010_M_TR" style="border: 1px solid black;">
    <td style="padding: 0px; width: 15px;">
      <input class="collapse" id="btnMinus0_1010" style="padding: 0px; width: 15px; height: 20px; text-align: center; vertical-align: top; display: none;" onclick="collapse('0_1010')" type="button" value="-">
      <input class="expand" id="btnPlus0_1010" style="padding: 0px; width: 15px; height: 20px; text-align: center; vertical-align: top;" onclick="expand('0_1010')" type="button" value="+">
    </td>
    <td style="padding: 0px; width: 100%; text-align: left; background-color: gray;">
      <span>Engine, Fuel and Cooling Systems</span>
    </td>
    <td>
      <a class="up" href="#"><i class="fa fa-angle-up" aria-hidden="true"></i></a>
      <a class="down" href="#"><i class="fa fa-angle-down" aria-hidden="true"></i></a>
    </td>
  </tr>
</table>

Answer 1

您的症状与您的代码不符，但导致您的症状的三个最可能的原因是(我倾向于#3):

1. 您有一个 .up、.down、.bottom 或 .top 元素内部 .up、.down、.bottom 或 .top 元素。因此，由于 click 传播(并且 jQuery 在进行事件委托(delegate)时忠实地复制了这一点)，因此它会针对最内部的匹配以及最外部的匹配触发。

   如果是这样，请将处理程序更直接地定位到有问题的元素。

   或

2. 您运行代码两次，因此设置了两个处理程序，每个处理程序都会触发。

   如果是这样，呃，不要这样做。 :-)

   或

3. 您的table位于另一个table内，因此$("table")与它们都匹配，并且再次因为click 传播(这次是在 DOM 级别)，您会从两个表中获得响应。

   如果是这样，请仅定位您希望这些处理程序连接到的表。

由于您的代码没有复制它，因此这是 #1 的简化示例:

$("table").on("click", ".up, .down", function() {
  console.log(this.className + " clicked");
});

<table>
  <tbody>
    <tr class="up">
      <td class="down">Click me</td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

...以及#2:

$(document).ready(setup);
$(window).load(setup);
function setup() {
  $("table").on("click", ".up, .down", function() {
    console.log(this.className + " clicked");
  });
}

<table>
  <tbody>
    <tr>
      <td class="down">Click me</td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

...以及#3:

$("table").on("click", ".up, .down", function() {
  console.log(this.className + " clicked");
});

<table>
  <tbody>
    <tr>
      <td>
        <table>
          <tbody>
            <tr>
              <td class="down">Click me</td>
            </tr>
        </tbody>
      </table>
    </td>
  </tr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>