Javascript不提交來自動態生成表單的數據

Question

用戶單擊按鈕時，會將表單（#CtrlST）加載到usercontent div中。 然后，用戶填寫表格並提交。 問題在於它無法觸發ctrlst.onsubmit函數來處理表單數據。 對表單進行硬編碼后，submit函數會很好地觸發。 但是，動態生成的表單卻沒有。 我需要動態生成表單，因為我需要編寫的其余代碼需要以相同的方式工作。

window.onload = function() {
// Get references to elements on the page.
var StartGB = document.getElementById('StartGB');
var socketStatus = document.getElementById('usercontent');
var ctrlst = document.getElementById('CtrlST');
var mySocket = new WebSocket("ws://0.0.0.0:5678/");

if (StartGB) {
    StartGB.addEventListener("click", function (e) {
        var gbform = document.getElementById('usercontent');
        gbform.insertAdjacentHTML('afterbegin','\n<form class="CST" id="CtrlST" action="#" method="post">\n'+
        '<div class="grid-container-plus">\n'+
        '<div class="grid-item"><input id="goodreads" name="goodreads" placeholder="Good"></div>\n'+
        '<div class="grid-item"><input id="badreads" name="badreads" placeholder="Bad"></div>\n'+
        '<div class="grid-item"><button type="submit" class="sbutton">&laquo; Start &raquo;</button></div>\n'+
        '</div>\n'+
        '</form>\n');
    })

}

if (ctrlst) {
    alert('wtf')
    // Send a message when the form is submitted.
    ctrlst.onsubmit = function(e) {
        e.preventDefault();
        // Retrieve the message from the Good /Bad form.
        var message = good.value + ':' + bad.value;
        // Send the message through the WebSocket.
        alert(message);
        mySocket.send(message);
        // Add the message to the messages list.
        socketStatus.innerHTML += '<div class="received">' + message + '</div>';
        return false;
    };
}
};

Answer 1

實際上，如果將事件附加到DOM，則該DOM對象應該已經可用。 因此，您的第一個帶有硬編碼形式的案例可以正常工作。

對於第二種情況，如果要動態注入與表單相關的DOM，則在注入HTML之后也應附加事件。

修改代碼如下，以動態附加提交事件，這將適合您的情況，

window.onload = function() {
// Get references to elements on the page.
var StartGB = document.getElementById('StartGB');
var socketStatus = document.getElementById('usercontent');
var mySocket = null; //new WebSocket("ws://0.0.0.0:5678/");

if (StartGB) {
    StartGB.addEventListener("click", function (e) {
        var gbform = document.getElementById('usercontent');
        gbform.insertAdjacentHTML('afterbegin','\n<form class="CST" id="CtrlST" action="#" method="post">\n'+
        '<div class="grid-container-plus">\n'+
        '<div class="grid-item"><input id="good" name="goodreads" placeholder="Good"></div>\n'+
        '<div class="grid-item"><input id="bad" name="badreads" placeholder="Bad"></div>\n'+
        '<div class="grid-item"><button type="submit" class="sbutton">&laquo; Start &raquo;</button></div>\n'+
        '</div>\n'+
        '</form>\n');
        addSubmitEvent();
    })

}
addSubmitEvent();
};
function addSubmitEvent(){
var ctrlst = document.getElementById('CtrlST');
if (ctrlst) {
    alert('wtf')
    // Send a message when the form is submitted.
    ctrlst.onsubmit = function(e) {
        e.preventDefault();
        // Retrieve the message from the Good /Bad form.
        var message = good.value + ':' + bad.value;
        // Send the message through the WebSocket.
        alert(message);
        mySocket.send(message);
        // Add the message to the messages list.
        socketStatus.innerHTML += '<div class="received">' + message + '</div>';
        return false;
    };
}
}

對於這種動態元素事件處理，還有一個稱為委托的概念，請仔細閱讀以供參考。 如果使用JQuery，則委派將很容易。