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>' 
 
\t \t \t \t \t +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>

내 테이블이 display 방법을 사용하여 표시됩니다 후. 처음으로 행을 dblclick하면 예상대로 작동하고 삭제 버튼이 표시됩니다. 삭제를 클릭하면 행이 삭제되고 표가 다시 렌더링됩니다. 그러나이 후에 행은 더 이상 dbl 클릭 할 수 없습니다. 나는 디버깅을 시도했지만 컨트롤은 심지어 dblclick 리스너에 들어 가지 않을 것입니다.

누군가가 왜 그렇게 설명 할 수 있습니까? 여기서 뭐가 잘못 됐어 ??

Answer 1

바인딩이처럼 TR 요소 :.

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

그것은 동적으로 ("TR") 내가이 대신`$을 시도