javascript - 动态删除和重新添加链接元素只有在第二次单击时才会触发

Question

我有一个表格，它会在表单中键入输入元素时刷新。 keyup 后，我通过首先删除所有现有行，然后动态添加新表行来刷新表数据。每个表行都包含指向另一个页面的链接。在初始页面加载时，第一次点击链接即可正常工作；但在随后的表刷新中，该链接直到第二次单击才会触发。

许多其他 SO 帖子都建议使用“on”方法，但是，这在这种情况下不起作用。这里的问题似乎是由 jQuery“remove”方法引起的。当我注释掉下面的行时，第一次单击时链接始终可以正常工作。

$("#myTable").find("tr:not(:first)").remove();

我还尝试使用“分离”而不是“删除”，但遇到了一些循环逻辑，因为我试图分离动态创建的尚不存在的行，然后稍后将它们添加回来。

以下是相关代码片段:

$("input, select, #circles-slider").on("keyup change slidestop", function(event) {

    function searchSuccess(data, textStatus, jqXHR) {
        $(document).ready(function() {
        $("#myTable").find('tr:not(:first)').remove();
        for (var i = 0; i < data.length; i++) {
            var convertedData = JSON.stringify(data); 
            var str = jQuery.param(params);
            $('#myTable tr:last').after(
                "<tr>\
                 <td data-label='Rate' class = 'main-rate'>" + data[i][0].toFixed(3) + "%</td>\
                 <td data-label='APR'>" + data[i][2].toFixed(3) + "%</td>\
                 <td data-label='Payment'>$" + data[i][3].toFixed(2) + "</td>\
                 <td data-label='Program'>" + data[i][7] + "</td>\
                 <td data-label='Points'>" + data[i][8].toFixed(3) + "</td>\
                 <td data-label='Closing Costs'>$" + data[i][9].toFixed(2) + "            </td>\
                 <td data-label='Apply' id = 'tree'><a class = \'target\' href = \'/application\/?" + str + "'>Apply Now</a></td>\
                 </tr>");
            } 
        });
    }
}); 

// testing use of "on" does not work
$("#myTable").on("click", "a", function(){
      alert("Test click");
});

<table id="myTable">
  <caption>Loan Program options and interest rate table</caption>
  <tr id="header_row">
    <th>Rate</th>
    <th>APR</th>
    <th>Payment</th>
    <th>Program</th>
    <th>Points</th>
    <th>Closing Costs</th>
  </tr>
</table>

完整代码在这里:https://jsfiddle.net/shanif/kqLkaax7/感谢您的帮助!

Answer 1

我最近遇到了此类链接问题，因此我最终使用 jquery 实现了一些 jenky 魔法:

<a href="#" onclick="$(this).click()">Double Click Simulation</a>

这会模拟双击，以确保脚本重新加载。