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

时间:2019-07-15 16:58:33

标签: javascript createelement

因此,我用javascript创建了一个button元素。一切似乎都进行得很顺利。

    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元素进行操作,而不是发布或获取。 任何帮助将非常感激。谢谢!

1 个答案:

答案 0 :(得分:-1)

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

要阻止表单提交,请使用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>