javascript中的onclick功能按钮无法正常工作

Question

I am a newbie in jquery, I have a stupid question for onclick function. Please help me. I have a table, when viewer click "Add new" button, I will using jquery add a row to existing table. In new row, there are 2 textbox to input data and a button to transfer data from textbox to php file. This is my code: html code:

<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>

script:

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

});
}

})
})

When I click to Save button in each row, nothing is happen. I tried by replace all click Save function with alert but there is not change. Pls help me. Thank you in advance!

Answer 1

click() does not work on dynamically generated elements. You can use on():

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

or you can set a function when creating the element:

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