javascript中的onclick功能按钮不起作用答案

【问题标题】：Onclick function button in javascript not workingjavascript中的onclick功能按钮不起作用
【发布时间】：2014-09-18 01:16:22
【问题描述】：

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

});
}

})
})

当我单击每一行中的“保存”按钮时，什么都没有发生。我尝试用警报替换所有单击保存功能，但没有变化。请帮助我。提前谢谢！

【问题讨论】：

标签： javascript php button onclick

【解决方案1】：

click() 不适用于动态生成的元素。你可以使用 on():

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

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

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

【讨论】：