Javascript가 클릭 이벤트에 응답하지 않는 행을 추가했습니다.

Question

javascript를 사용하여 테이블 행을 동적으로 추가하고 삭제하는 양식이 있습니다. 또한 각 행의 텍스트 상자와 각 행의 번호를 매기려고합니다. 내가 추가 한 네 개의 행이 있다고 가정 해 보겠습니다. 행 번호 3을 삭제하면 나머지 행은 1, 2, 4로 표시됩니다. jquery는 1, 2, 3 행의 번호를 다시 지정해야합니다. 내 코드는 아래에 게시됩니다. 행이 추가 된 후에 행이 인식되지 않는다는 직감이 있습니다. 아무도 이것으로 나를 도울 수 있습니까?

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
    function deleteRow(row) { 
     var x = document.getElementById('bom_table'); 
     if (x.rows.length > 4) { 
      var i = row.parentNode.parentNode.rowIndex; 
      document.getElementById('bom_table').deleteRow(i); 

     } 
    } 


    function insRow() { 

     var x = document.getElementById('bom_table'); 
     var len = x.rows.length; 
     // deep clone the targeted row 
     var new_row = x.rows[len - 2].cloneNode(true); 
     // get the total number of rows 

     // set the innerHTML of the first row 
     //   new_row.cells[0].innerHTML = len - 2; 


     // grab the input from the first cell and update its ID and value 
     var inp1 = new_row.cells[1].getElementsByTagName('input')[0]; 
     inp1.id += len; 
     inp1.value = ''; 

     // grab the input from the first cell and update its ID and value 
     var inp2 = new_row.cells[2].getElementsByTagName('input')[0]; 
     inp2.id += len; 
     inp2.value = ''; 

     // grab the input from the first cell and update its ID and value 
     var inp3 = new_row.cells[3].getElementsByTagName('input')[0]; 
     inp3.id += len; 
     inp3.value = ''; 

     // grab the input from the first cell and update its ID and value 
     var inp4 = new_row.cells[4].getElementsByTagName('input')[0]; 
     inp4.id += len; 
     inp4.value = ''; 

     // grab the input from the first cell and update its ID and value 
     var inp5 = new_row.cells[5].getElementsByTagName('input')[0]; 
     inp5.id += len; 
     inp5.value = ''; 

     // append the new row to the table 
     var tbody = document.getElementById('bom_table').getElementsByTagName("tbody")[0]; 
     tbody.appendChild(new_row); 


    } 

    function deleteRow2(row) { 
     var x = document.getElementById('ro_table'); 
     if (x.rows.length > 4) { 
      var i = row.parentNode.parentNode.rowIndex; 
      document.getElementById('ro_table').deleteRow(i); 
     } 

    } 

    function insRow2() { 

     var x = document.getElementById('ro_table'); 
     var len = x.rows.length; 
     // deep clone the targeted row 
     var new_row = x.rows[len - 2].cloneNode(true); 
     // get the total number of rows 

     // set the innerHTML of the first row 
     //   new_row.cells[0].innerHTML = len - 2; 

     //   if (len = 3) 
     //    new_row = x.rows[2].cloneNode(true); 
     //   else 
     //    ; 

     // grab the input from the first cell and update its ID and value 
     var inp1 = new_row.cells[1].getElementsByTagName('input')[0]; 
     inp1.id += len; 
     inp1.value = ''; 

     // grab the input from the first cell and update its ID and value 
     var inp2 = new_row.cells[2].getElementsByTagName('input')[0]; 
     inp2.id += len; 
     inp2.value = ''; 

     // grab the input from the first cell and update its ID and value 
     var inp3 = new_row.cells[3].getElementsByTagName('input')[0]; 
     inp3.id += len; 
     inp3.value = ''; 

     // grab the input from the first cell and update its ID and value 
     var inp4 = new_row.cells[4].getElementsByTagName('input')[0]; 
     inp4.id += len; 
     inp4.value = ''; 

     // grab the input from the first cell and update its ID and value 
     var inp5 = new_row.cells[5].getElementsByTagName('input')[0]; 
     inp5.id += len; 
     inp5.value = ''; 


     // append the new row to the table 
     var tbody = document.getElementById('ro_table').getElementsByTagName("tbody")[0]; 
     tbody.appendChild(new_row); 
     //   x.appendChild(new_row); 



    } 




</script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var i = 0 
     var j = 1 
     var k = 1 
     $('input').each(function (i) { 

      $(this).attr("id", "text_" + i++); 

     }) 
     $('.bom_rowcount').each(function (j) { 
      $(this).attr("innerHTML", 1 + j++); 

     }) 
     $('.ro_rowcount').each(function (k) { 
      $(this).attr("innerHTML", 1 + k++); 

     }) 
     $(".remove").click(removefunction()); 

     function removefunction() { 
      $('input').each(function (i) { 

       $(this).attr("id", "text_" + i++); 
      }) 
      $('.bom_rowcount').each(function (j) { 
       $(this).attr("innerHTML", 1 + j++); 

      }) 
      $('.ro_rowcount').each(function (k) { 

       $(this).attr("innerHTML", 1 + k++); 

      }) 
     }; 


     $(".add").click(function() { 
      $('input').each(function (i) { 
       $(this).attr("id", "text_" + i++); 
      }) 
      $('.bom_rowcount').each(function (j) { 
       $(this).attr("innerHTML", 1 + j++); 
      }) 
      $('.ro_rowcount').each(function (k) { 
       $(this).attr("innerHTML", 1 + k++); 
      }) 


     }); 




    }); 
</script> 

Answer 1

코드 준비가 완료된 직후에 존재하는 노드에 이벤트 처리기를 추가하도록 코드가 작성됩니다.

다음에 추가하는 노드는 여기에 포함되지 않습니다.

당신이해야 할 일은 on을 사용하여 이벤트 위임을 설정하는 것입니다. 이벤트 위임은 핸들러를 문서에 놓은 다음 대상이 선택기와 일치하는지 확인하기 위해 거품을내는 모든 이벤트를 검사합니다.

문서를 읽고 문제가 있습니다. 그래도 문제를 해결할 수 없으면이 질문을 업데이트하거나 (할 일이 아닐 수도 있음) 다른 SO 질문을하고 시도한 것과 작동하지 않는 것을 설명 할 수 있습니다.