在 jQuery 中单击两次时删除行正在工作

Question

I have a table with a delete button but the delete button is only working when clicked twice for the first time.

After deleting one row the button is working perfectly fine ie it is deleting row in one click only.

I am not sure why I am seeing this behavior.Any help or suggestion will be appreciated.Thanks.

 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

The issue is because you have put a jQuery event handler inside the function, so the first click adds the event handler, and it only runs on the second click. The additional problem there is that every other click adds another handler.

You've not shown exactly how you call delRow() , but you can fix the problem by using a delegated event handler:

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