Javascript未从动态生成的表单提交数据

Question

当用户单击按钮时，它会将表单 (#CtrlST) 加载到用户内容 div 中。然后用户填写表单并提交。问题是它无法触发 ctrlst.onsubmit 函数来处理表单数据。当表单被硬编码时，提交函数会很好地触发。但是，动态生成的表单不会。我需要动态生成表单，因为我需要编写的其余代码需要以相同的方式工作。

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，委托会很容易。