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

Question

所以，我用 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 元素进行操作，而不是发出 post 或获取。任何帮助将非常感激。谢谢！

Answer 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>

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

createElement button seems to submit form instead of function call

javascript

createelement