使用 jQuery 加載的表單不會更新通過 AJAX/PHP 發送的表行

Question

我會盡可能地簡化我的問題，並且只包括相關的內容。

我正在努力實現的目標以及它是如何工作的

我得到了一個HTML表，其中加載了我數據庫中的所有行，每一行都有來自數據庫的ID和一個打開模態的更新按鈕 - 效果很好。

在打開的模式中，有一個表單加載了 jQuery 的.load()來自名為update.html的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-content, #popup-close, .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 表單有關 - 但我不能再說吧。

我希望這不會太長，但我想盡可能詳細地解釋，但要簡化。 感謝每一個答案或評論，讓我更多地了解如何解決這個問題。

Answer 1

解決方案：

正如@04FS所提到的，解決方案只是使用 事件委托。 不錯的推薦閱讀。 學到了一噸。

我首先將我的 AJAX 調用移動到.load()函數中，然后我將使用.on()在表單提交時調用$(this)而不是調用表單本身的 ID（它還不存在.on() 。

代碼示例 - popup.js

$('.popup-content').load('/right/path/here/update.html', function() {
    insertValues(columns);
    $('<input>').attr({
        type: 'hidden',
        value: id,
        name: 'rowId'
    }).prependTo('#update-form');

    $(this).on('submit', 'form', function (e) {
        var inputData = $('#update-form').serialize();
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'update.php',
            data: inputData,
            success: function(data) {
                alert('success');
            },
            error: function() {
                alert('failed');
            }
        });
    });
});