隐藏输入按钮上的 .click() 不起作用（未定义）

Question

我花了几个小时阅读了无数的 stackoverflow，但我无法让它工作。

我有一个表单（Wordpress 中的 Caldera 表单），它有一个提交按钮（实际上它是一个输入标签）。 通过 JS，我添加了一个事件监听器，因为我想将表单数据备份到我的数据库中。 事件侦听器行：

document.querySelector(".submit-permanently").addEventListener("click", handleIorSaveClick);

handleIorSaveClick function 做得很好，到目前为止一切都很好。 但是，它现在不再提交表单。 尽管我没有在任何地方包含“防止默认”声明。 它只是调用我的 handleIorSaveClick function （它具有数据库的魔力），仅此而已。 表单不再提交。

正因为如此，我想到了放置一个看起来像提交按钮的假按钮，同时使真正的提交按钮不可见。 如果用户单击假按钮，则事件侦听器正在调用 handleIorSaveClick function 并从那里我想在数据库魔术完成后自动单击“真实”提交按钮。

为此，我包含了这三行代码：

document.querySelectorAll('.real-submit')[0].style.visibility = "visible";
document.querySelectorAll('.real-submit')[0].style.display = "inline";
document.querySelectorAll('.real-submit')[0].click();

奇怪的是，前两行正在执行：按钮变得可见。 但是（在我的脑海中）应该模拟用户单击该按钮以实际提交表单的第三行不会发生。 我什至可以 select 使用document.querySelectorAll('.real-submit')[0]的 chrome 开发控制台中的按钮，但这给了我一个未定义的错误：document.querySelectorAll('.real-submit')[0]。点击（）;

谁能帮我告诉我为什么 the.click() 没有做任何事情或告诉我为什么事件侦听器首先阻止表单提交？

Answer 1

您可以做两件事，在您的第一种方法中，在不制作假提交按钮的情况下，在 handleIorSaveClick() function 结束时，从“.submit-permanently”按钮取消绑定事件侦听器，然后调用

document.querySelectorAll('.real-submit')[0].click();

或者在你的第二种情况下，而不是

document.querySelectorAll('.real-submit')[0].click();

这样做：

document.getElementById("myForm").submit();