Dblclick 监听器在我的代码中只触发一次

Question

我是 Javascript 的新手，我开发了以下只能运行一次的代码。

function display(arr) {
  $(".tbl tbody").empty();
  for (i = 0; i < arr.length; i++) {
    $(".tbl tbody").append('<tr class="tblrow" id = "'+i+'"> <td><input id="editInput" type="text"/>'+arr[i].Empid+'</td><td>'+arr[i].name+'</td><td>'
     +arr[i].pd+'</td><td>'+arr[i].unplannedleaves+'</td><td>'+arr[i].response_time+'</td><td class = "tt"><button class="delbtn" id ="btn'+i+'">Delete</button></td></tr>');

    $("td").css("text-align", "center");
    $("td").css("border", "1px solid black");
    $(".tt").css("border", "none");
    $(".tbl").css("border", "none");
    $(".delbtn").css("display", "none");
  }
}

$("tr").on('dblclick', function() {
  var s = this.id;
  $("#btn" + s).css("display", "block");
});

$(".delbtn").click(function() {
  var s = this.id;
  var k = s.slice(3);
  arr.splice(k, 1);
  display(arr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="addelem">
  <table class="tbl1">
    <tr>
      <td>
        <input id="empid" type="text" placeholder="EmpId">
      </td>
      <td>
        <input id="name" type="text" placeholder="Name">
      </td>
      <td>
        <input id="pd" type="number" placeholder="Pds Delivered">
      </td>
      <td>
        <input id="unp" type="number" placeholder="Unplanned leaves">
      </td>
      <td>
        <input id="rsp" type="number" placeholder="Response Time">
      </td>
    </tr>
  </table>

  <button id="submit">Submit</button>
  <button id="cancel">Cancel</button>

</div>

在我的 table 使用 display 方法显示后。我第一次 dblclick 一行时，它按预期工作并显示删除按钮。我单击删除行被删除并重新呈现 table。但是，在此之后该行不再是可单击的。我试过调试，但控件甚至无法进入 dblclick 侦听器。

谁能解释一下为什么会这样。这里出了什么问题？

Answer 1

像这样绑定您的 tr 元素：

$(document).on('dblclick', "tr", function() {
  var s = this.id;
  $("#btn" + s).css("display", "block");
});

它将使用您的 dblclick 事件动态订阅任何新的 tr

Dblclick 监听器在我的代码中只触发一次

Dblclick listener firing only once in my code

html

javascript

jquery

event-listener

jquery-events