JavaScript中的Onclick功能按钮不起作用

Question

我是jquery的新手，我对onclick函数有一个愚蠢的问题。 请帮我。 我有一个表，当查看器单击“添加新”按钮时，我将使用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

});
}

})
})

当我单击每一行中的“保存”按钮时，什么也没有发生。 我尝试用警报替换所有单击“保存”功能，但没有更改。 请帮助我。 先感谢您！

Answer 1

click（）在动态生成的元素上不起作用。 您可以使用on（）：

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

或者您可以在创建元素时设置一个函数：

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