Javascript 表单提交后重新加载表-AJAX

我有一个表，某种类型的待办事项列表，用户可以在其中单击检查图标，然后更改数据库中的值。这个函数工作得很好，但问题是，在我的脚本中，只有表中的第一个条目可以用AJAX检查，如果用户检查第二个、第三个或第四个条目等等，数据库中的值会发生变化，但页面会重新加载，AJAX函数不起作用

这是我的密码：

index.php：

if ($checktodo=="true") {
    $content=array("finished"=>$localtime);
    updateToDoInfo($id,$content);
}

todo.php：

<?php
// AJAX Script to submit form withouht page refresh
echo ("
    <script>
        $(function() {
            $('#form3').on(\"submit\", function(event) {
                event.preventDefault();

                $.ajax({
                    url: 'index.php',
                    type: 'post',
                    data: $(this).serialize(),
        beforeSend: function(){
                                    $('#loading').show();
                    },
                    complete: function(){
                                    $('#loading').hide();
                    },
                    success: function(html) {
            loadTab(1);
                    }
                });
            });
        });
    </script>
");

// Part of todo list table
if ($todo["duedate"][$x]<$localtime) {
    <tr>
        <td>
            <form name='form3' id='form3' action='./index.php' method='post'>
                <input type='hidden' name='checktodo' value='true'>
                <input type='hidden' name='id' value='".$todo["id"][$x]."'>
                <input type='hidden' name='pers_id' value='".$pers_id."'>
                <input type='hidden' name='sid' value='".$sid."'>
                <button class='btn btn-link btn-xs' type='submit'><i class='fa fa-check fa-2x'></i></button>
            </form>
        </td>
        <td>
        <a href='#edit-todo' onClick=\"setEditToDo('".$todo["id"][$x]."', '".$todo["descr"][$x]."')\" data-toggle='modal'><i class='fa fa-pencil-square-o fa-2x'></i></a>
        </td>

        if ($todo["cid"][$x]!=0) {
            <td>
            <a href='./index.php?func=editcontact&id=".$todo["cid"][$x]."&view=true&pers_id=$pers_id&sid=$sid' target='_blank'><i class='fa fa-user fa-2x'></i></a>
            </td>
            } else {
                <td></td>
        }

        <td>
        ".date("d.m.Y",$todo["duedate"][$x])."
        </td>
        <font color='red'>".strtoupper($creator["lastname"][0])." ".$creator["firstname"][0].": <b>".($todo["descr"][$x])."</b></font>
        </td>
    </tr>
} else {
    <tr>
        <td>
            <form name='form3' id='form3' action='./index.php' method='post'>
                <input type='hidden' name='checktodo' value='true'>
                <input type='hidden' name='id' value='".$todo["id"][$x]."'>
                <input type='hidden' name='pers_id' value='".$pers_id."'>
                <input type='hidden' name='sid' value='".$sid."'>
                <button class='btn btn-link btn-xs' type='submit'><i class='fa fa-check fa-2x'></i></button>
            </form>
        </td>
        <td>
        <a href='#edit-todo' onClick=\"setEditToDo('".$todo["id"][$x]."', '".$todo["descr"][$x]."')\" data-toggle='modal'><i class='fa fa-pencil-square-o fa-2x'></i></a></td>

        if ($todo["cid"][$x]!=0) {
            <td>
            <a href='./index.php?func=editcontact&id=".$todo["cid"][$x]."&view=true&pers_id=$pers_id&sid=$sid' target='_blank'><i class='fa fa-user fa-2x'></i></a>
            </td>
            } else {
            <td></td>
        }
        <td>".date("d.m.Y",$todo["duedate"][$x])."</td>";
        <td>"; callText('my_calendar_019'); print " ".strtoupper($creator["lastname"][0])." ".$creator["firstname"][0].": <b>".($todo["descr"][$x])."</b></td>";
    </tr>";
}
?>

---

您是否正在使用表单form3编写多行？您的元素需要是唯一的。您当前编写的事件将仅针对id为form3的第一个元素触发。您能否将代码缩减为仅包含问题的行？