Строка удаления работает при двойном нажатии в jQuery

Question

У меня есть таблица с кнопкой удаления, но кнопка удаления работает только при первом двойном нажатии.

После удаления одной строки кнопка работает отлично, т.е. удаляет строку одним щелчком только.

Я не уверен, почему я вижу это поведение. Любая помощь или предложение будут оценены. Спасибо.

function delRow() {
  $('input[type="button"]').click(function(e) {
    $(this).closest('tr').remove()
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable">
  <thead>
    <tr>
      <td class="headingalign" width="10%">Links</td>
      <td class="headingalign" width="34%">Desciption</td>
      <td class="headingalign" width="17%">Image</td>
      <td class="headingalign" width="17%">URL</td>
      <td class="headingalign" width="10%"></td>
    </tr>
  </thead>
  <tbody>
    <tr id="id0" class="vals" name="row">
      <xsl:for-each select="//faml/response/quicklinkresponsedto/quicklink/quicklinkdto">
        <xsl:variable name="style">
          <xsl:choose>
            <xsl:when test="position() mod 2 = 0">AlterRow2</xsl:when>
            <xsl:otherwise>AlterRow1</xsl:otherwise>
          </xsl:choose>
        </xsl:variable>
        <tr class='{$style}'>
          <xsl:variable name="txn_search">
            <xsl:value-of select="search" />
          </xsl:variable>
          <xsl:variable name="txn_desc">
            <xsl:value-of select="desc" />
          </xsl:variable>
          <xsl:variable name="txn_url">
            <xsl:value-of select="url" />
          </xsl:variable>
          <xsl:variable name="txn_img">
            <xsl:value-of select="img" />
          </xsl:variable>
          <td>
            <select type="select-one" id='fldsearch' class="objselect" name="fldsearch">
              <option value="S">Select</option>
              <option value="G">Guides</option>
              <option value="T">Templates</option>
              <option value="V">Videos</option>
            </select>
          </td>
          <td><input name="flddesc" value="{$txn_desc}" maxlength="55" size="75" /></td>
          <td><input name="fldimg" value="{$txn_img}" maxlength="45" size="45" /></td>
          <td><input name="fldurl" value="{$txn_url}" maxlength="35" size="35" /></td>
          <td><input tabindex="6" value="Delete Row" class="DeleteButton" type="button" /></td>
        </tr>
      </xsl:for-each>
    </tr>
    <tr id="id0" class="vals" name="row">
      <xsl:for-each select="//faml/response/quicklinkresponsedto/quicklink/quicklinkdto">
        <xsl:variable name="style">
          <xsl:choose>
            <xsl:when test="position() mod 2 = 0">AlterRow2</xsl:when>
            <xsl:otherwise>AlterRow1</xsl:otherwise>
          </xsl:choose>
        </xsl:variable>
        <tr class='{$style}'>
          <xsl:variable name="txn_search">
            <xsl:value-of select="search" />
          </xsl:variable>
          <xsl:variable name="txn_desc">
            <xsl:value-of select="desc" />
          </xsl:variable>
          <xsl:variable name="txn_url">
            <xsl:value-of select="url" />
          </xsl:variable>
          <xsl:variable name="txn_img">
            <xsl:value-of select="img" />
          </xsl:variable>
          <td>
            <select type="select-one" id='fldsearch' class="objselect" name="fldsearch">
              <option value="S">Select</option>
              <option value="G">Guides</option>
              <option value="T">Templates</option>
              <option value="V">Videos</option>
            </select>
          </td>
          <td><input name="flddesc" value="{$txn_desc}" maxlength="55" size="75" /></td>
          <td><input name="fldimg" value="{$txn_img}" maxlength="45" size="45" /></td>
          <td><input name="fldurl" value="{$txn_url}" maxlength="35" size="35" /></td>
          <td><input onClick="return delRow()" tabindex="6" value="Delete Row" class="DeleteButton" type="button" /></td>
        </tr>
      </xsl:for-each>
    </tr>
  </tbody>
</table>

Answer 1

Проблема заключается в том, что вы поместили обработчик событий jQuery в функцию, поэтому первый щелчок добавляет обработчик событий, и он запускается только при втором щелчке. Дополнительная проблема заключается в том, что при каждом следующем щелчке добавляется еще один обработчик.

Вы не указали, как именно вы вызываете delRow(), но вы можете решить эту проблему, используя делегированный обработчик события:

$('table').on('click', 'input[type="button"]', function() {
  $(this).closest('tr').remove();
})