删除按钮后表单元素不执行提交

Question

单击按钮时，单击事件会冒泡以形成并执行正确的回调。但是，删除按钮后，不会触发表单提交事件。我无法确切地找到为什么会发生这种情况。 DOM 更新后是否会以某种方式调用提交事件？我不是在寻找解决方案，而是在寻找对这种行为的解释。

HTML：

<form onsubmit="formSubmitCallback()" onclick="formClickCallback()">
  <div onclick="divCallback()">
    <button id="button" onclick="buttonCallback()">
      click me
    </button>
  </div>
</form>

JS：

function buttonCallback() {
  console.log("button")
  document.getElementById("button").remove()
}

function divCallback() {
  console.log("div")
}

function formClickCallback() {
console.log("form click")
}

function formSubmitCallback() {
  console.log("form submit")
}

结果：

"button"
"div"
"form click"

Answer 1

我认为你需要做

<input type="submit" id="button" onClick="buttonCallBack()">
click me
</input>

而不是

<button  id="button" onClick="buttonCallBack()">
click me
</button>

以便表单知道该按钮应该提交它。