자바 스크립트에서 Onclick 기능 버튼이 작동하지 않습니다.

Question

jquery에서 초보자입니다. onclick 기능에 대해 어리석은 질문이 있습니다. 도와주세요. 나는 테이블을 가지고 있는데, 뷰어가 "Add new"버튼을 클릭하면 jquery를 사용하여 기존 테이블에 행을 추가합니다. 새로운 행에는 데이터를 입력하는 2 개의 텍스트 상자와 텍스트 상자에서 PHP 파일로 데이터를 전송하는 버튼이 있습니다. 이 내 코드는 다음과 같습니다 HTML 코드 :

는

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 

<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> 

<TABLE id="dataTable" width="350px" border="1"> 
    <thead> 
     <td>No</td> 
     <td>First name</td> 
     <td>Last name</td> 
    </thead> 
<?php 

      include("functions/connect_db.php"); 
       $no=0; 
    $sql="SELECT * FROM `fullnames`"; 
    $result=mysqli_query($conn,$sql) or die('Could not select Machine'.mysqli_error($conn)); 
    while ($set=mysqli_fetch_array($result,MYSQLI_ASSOC)) { 
        $no++; 
     $first=$set['firstname']; 
     $last=$set['lastname']; 
?> 
    <tbody> 
    <tr> 
    <td><?php echo $no; ?></td> 
    <td><?php echo $first; ?></td> 
    <td><?php echo $last; ?></td> 
</tr> 
    <?php } ?> 
    </tbody> 
</TABLE> 

스크립트 : 나는 각 행에 저장 버튼을 클릭하면

function addRow(tableID) { 

     var table = document.getElementById(tableID); 

     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 

     var cell1 = row.insertCell(0); 
     cell1.innerHTML = rowCount ; 


     var cell2 = row.insertCell(1); 
     var element1 = document.createElement("input"); 
     element1.type = "text"; 
     element1.id="first_input_"+rowCount; 
     cell2.appendChild(element1); 


     var cell3 = row.insertCell(2); 
     var element2 = document.createElement("input"); 
     element2.type = "text"; 
     element2.id="last_input_"+rowCount; 
     cell3.appendChild(element2); 


     var cell4=row.insertCell(3); 
     var element3 = document.createElement('input'); 
     element3.setAttribute('type','button'); 
     element3.id="#button_"+rowCount; 
     element3.className="butt_class"; 
     element3.value='Save'; 
     cell4.appendChild(element3); 

    } 

$(document).ready(function() { 
$(".butt_class").click(function() 
{ 
var ID=$(this).attr('id'); 
var first=$("#first_input_"+ID).val(); 
var last=$("#last_input_"+ID).val(); 
if(first.length>0 && last.length>0) 
{ 

$.ajax({ 
type: "POST", 
url: "add_new.php", 
data: dataString, 
cache: false 

}); 
} 

}) 
}) 

, 아무것도 일어나지 않습니다. 나는 모든 기능을 경고로 바꾸기를 시도했지만 변경은 없다. Pls 나를 도와주세요. 미리 감사드립니다.

Answer 1

동적으로 생성 된 요소에서 click()이 작동하지 않습니다.

$(document).ready(function() { 
    $("#dataTable").on('click', '.butt_class', function() { 
     //... 
    }); 
}); 

또는 요소를 만들 때이 기능을 설정할 수 있습니다 : 당신은()에 사용할 수 있습니다

element3.onclick= function() { 
     //... 
    }; 

을