装有jQuery的表单不会更新通过AJAX / PHP发送的表格行 我要实现的目标及其工作原理带有文件名的代码，它包含和执行的操作：我的问题和一些评论解决方案：

问题描述

我将尽可能简化我的问题，仅包括相关内容。

我要实现的目标及其工作原理

我从数据库中加载了所有行的 HTML 表，每行将具有数据库中的 ID 和一个更新按钮，该按钮打开了一个模式-效果很好。

在打开的模式中，有一个表单是从名为.load()的 HTML 文档加载了jQuery的update.html。我插入表单字段，其中包含当前所选行在数据库中已经存在的值。为此，我创建了一个名为columns的数组。

这一切都完美，但是将表单提交给 AJAX 后，该表单会将其发送到 PHP -它不会使用输入字段中的给定值更新行。

带有文件名的代码，它包含和执行的操作：

index.php - HTML / PHP 表DOM：

// popup modal
<div class="popup-overlay">
    <div class="popup-content">
        // content getting loaded by jquery when updateModal() has been fired.
    </div>
</div>

// loop each row and get the **ID** 
<?php
    foreach($result as $rows) {
    $rowId = $rows['id'];
?>

// display rows and set the ID
<tr id="<?php echo $rowId;?>">
    <td><?php echo $rows['ip']; ?></td>
    //row for update button,opens the modal and fires updateModal() function
    <td><a onclick="updateModal(this.closest('tr').id)">Update</a></td>
</tr>

update.html -加载的 HTML 表单：

<h1>Update row - Modal</h1>
<form id="update-form" name="form">
    label for="ip"><h3>IP address</h3></label>
    <input class="form-input-style" type="text" name="ip" id="ip" value="">

    <input type="hidden" name="update" id="update" value="1"/>
    <button class="button-style button-green" type="submit" name="submit">Update</button>
</form>

popup.js -切换模式，加载HTML表单，在表单字段中插入表格行值，使用序列化表单数据向PHP提出AJAX请求

切换模式并获取ID（有效）：

// create columns array
var columns = [];
function toggleModal(id) {
    columns.splice(0,columns.length);
    // find the row id that's echoed by PHP in index.php
    $('#'+ id).find('td').each(function(){
        columns.push($(this).text());
    });

    $(".popup-overlay,.popup-content,#popup-close,.popup-background").addClass("active");
    $("#popup-close,.popup-background").on("click",function(){
        $(".popup-overlay,.popup-background").removeClass("active");
    });
};

插入值，触发toggleModal()，加载 HTML 模式并在表单提交时发送已加载的表单数据：

function updateModal(id) {  
    toggleModal(id);
    
    // assoc array with all the form fields,simplified to only contain IP row
    function insertValues() {
        const inputValues = {
            ip              :   columns[0]
        };

        // get key and set current row value that's in the database which I want to update,works.
        for(inputName in inputValues) {
            document.getElementById(inputName).value = inputValues[inputName];
        };
    };
    
    // load the modal HTML from update.html 
    // and create and prepend a hidden input field to pass the rowId (probably a better solution for this.)
    $('.popup-content').load('/right/path/here/update.html',function() {
        insertValues(columns);
        $('<input>').attr({
            type: 'hidden',value: id,name: 'rowId'
        }).prependTo('#update-form');
    });

    //AJAX request that fires on submission
    $('#update-form').on('submit',(event) => {
        event.preventDefault();
        var inputData = $('#update-form').serialize();

        $.ajax({
            type: 'POST',url: 'update.php',data: inputData,success: function (data) {
                alert('success');
            },error: function () {
                alert('failed');
            }
        });
    });
};

update.php -获取表单数据并在 SQL 数据库中进行更新 （为简化起见，删除了错误处理程序，但它们始终未返回任何内容）

//removed connection file and usersession file to minify question
if(isset($_POST['update']==1)) {

    $id = $_POST['rowId'];
    $ip = $_POST['ip'];
                    
    $sql = "UPDATE `totaloversiktliste2` SET `ip`=:ip WHERE `id`=:id";
    $args = array(
        ':ip'           =>  $ip,':id'           =>  $id
    );

    $stmt = $conn->prepare($sql);
    $result = $stmt->execute($args);
}

我的问题和一些评论

问题

我在这里做错了什么？我不希望被人喂饱，而是朝着正确的方向前进。任何调试技巧，一般建议或评论都将受到欢迎和赞赏。

会发生什么

控制台中没有错误，它只会刷新我的页面，并且不执行任何操作。 Network控制台显示表单数据已通过HTTP请求发送，并显示状态200 OK。找不到日志。

评论

几天前，我开始尝试自己找出答案，此后一直在努力解决同一问题。即使经过我的逻辑思考，似乎仍无法正确接收某些东西-应该。

我已经对代码进行了太多的调整，我什至不确定自己做错了什么-重写了很多遍，并尝试了几种不同的方法。我认为是错误的，无法正确设置/发送值或触发函数的顺序，并且由于AJAX是异步的，所以这可能与它以及我如何加载HTML表单有关-但我做不到告诉更多。

我希望时间不会太长，但是我想尽我所能尽力而为地详细解释并简化。 感谢您提供的所有答案或评论，让我对如何解决这个问题有了更多的了解。

解决方法

解决方案：

如@04FS所述，该解决方案仅使用Event Delegation。 不错的推荐读物。学了一吨。

我首先将AJAX调用移至.load()函数中，然后不调用表单本身的ID（尚不存在），而是使用{{ 1}}。

代码示例-popup.js

$(this)