不从动态生成的表单提交数据的Javascript
不从动态生成的表单提交数据的Javascript
提问于 2018-10-16 02:12:44
当用户单击按钮时，它会将一个表单(#CtrlST)加载到usercontent 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">« Start »</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;
};
}
};回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-16 04:05:41
实际上，如果您要将事件附加到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">« Start »</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，委派将会很容易。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52822536
复制相关文章
相似问题