createElement 按钮似乎提交表单而不是函数调用[重复]

Posted 2023-05-07

【中文标题】createElement 按钮似乎提交表单而不是函数调用[重复]

【英文标题】：createElement button seems to submit form instead of function call [duplicate]

【发布时间】：2019-11-24 10:03:58

【问题描述】：

所以，我用 javascript 创建了一个按钮元素。似乎一切都很顺利。

    var btn = document.createElement("button");
    btn.setAttribute('class', 'btn btn-primary');
    btn.setAttribute('style', 'float: right; display: inline-block; margin-top: 3px; margin-right: 15px;');
    btn.innerhtml = 'Remove Attachment';
    btn.setAttribute('onclick', 'removeAttachment(' + i + ')');

我遇到的问题是，当我单击按钮时，它没有调用 removeAttachment 函数，而是看起来像是在提交页面表单。我是否错过了使按钮仅绑定到 onclick 事件而不绑定到表单的内容？

我真正想做的只是对一些 DOM 元素进行操作，而不是发布帖子或获取。 任何帮助将非常感激。谢谢！

【问题讨论】：

按钮的默认类型是submit。

如果您将按钮放在页面表单中，它会自动“绑定”到表单并默认用作其提交按钮。修复它的最简单方法是为按钮赋予属性type，其值为”button”

是的，但是当您强制执行 onclick 事件处理程序时，这不会覆盖默认操作吗？

@Lennholm 默认情况下，按钮不会成为提交按钮。

@Lennholm - 那是票！！！添加“类型”属性解决了这个问题。太感谢了！！！ :)

【参考方案1】：

由于您使用 javascript 创建按钮，因此实际上不需要将 javascript 添加到 html。因此，请改用addEventListener 将点击事件添加到 javascript 而不是 HTML。

要阻止表单提交，请使用preventDefault()

btn.addEventListener('click', (e) => 
  e.preventDefault()
  removeAttachment(i)
);

另一个选项是设置按钮的类型而不是preventDefault()：

btn.type = 'button'

这是preventDefault() 的工作示例

var i = 0;

var btn = document.createElement("button");
btn.setAttribute('class', 'btn btn-primary');
btn.setAttribute('style', 'float: right; display: inline-block; margin-top: 3px; margin-right: 15px;');
btn.innerHTML = 'Remove Attachment';
btn.addEventListener('click', (e) => 
  e.preventDefault()
  removeAttachment(i)
);

document.querySelector('form').appendChild(btn)

function removeAttachment(i) 
  console.log('Remove Attachment:', i)

<form action="" method="post">

</form>

这是一个使用type="button"的工作示例

var i = 0;

var btn = document.createElement("button");
btn.setAttribute('class', 'btn btn-primary');
btn.setAttribute('style', 'float: right; display: inline-block; margin-top: 3px; margin-right: 15px;');
btn.innerHTML = 'Remove Attachment';
btn.type = 'button'
btn.addEventListener('click', (e) => removeAttachment(i));

document.querySelector('form').appendChild(btn)

function removeAttachment(i) 
  console.log('Remove Attachment:', i)

<form action="" method="post">

</form>

【讨论】：

很棒的建议。不幸的是，它仍然以同样的方式行事。我当然认为这可以解决问题。