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() {
        //...
    };

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

1 个答案: