我查看过以前的问题,但他们似乎没有回答我发生的事情.
在我的真实代码中,我正在创建一个表单并添加两个按钮,一个用于提交,另一个用于其他功能.为此,我将按钮的“type”属性设置为“submit”为一个,“按钮”为另一个.问题是在Chrome中,两个按钮都会提交表单.
在我的真实代码中,我正在创建一个表单并添加两个按钮,一个用于提交,另一个用于其他功能.为此,我将按钮的“type”属性设置为“submit”为一个,“按钮”为另一个.问题是在Chrome中,两个按钮都会提交表单.
表格代码：
form = $(document.createElement('form')).attr('method','get').attr('action',defaults.action).appendTo(object);
按钮代码：
form.append(
$(document.createElement('div')).
attr('class',classesHash.buttonsContainer).
append(
$(document.createElement('button')).
attr('type','submit').
addClass(classesHash.submitButton).
attr('title',i18n('Filter')).
attr('value',i18n('Filter')).
append(i18n('Filter'))
).
append(
$(document.createElement('button')).
attr('type','button').
addClass(classesHash.addButton).
attr('title',i18n('Add filter')).
attr('value',i18n('Add filter')).
append(i18n('Add filter')).
click(addFilter)
)
);
我用这个HTML代码做了一个更简单的测试：
<form action="" method="get"><button id="test">test</button></form>
当Chrome找不到提交按钮时,任何按钮都会提交表单.
以下不起作用,表单在按钮点击时提交：
$('#test').attr('type','button');
以下工作正常,单击按钮时表单不提交：
document.getElementById('test').setAttribute('type','button');
表单和按钮是动态生成的,我使用的是jQuery,因此attr()是最明显的方法. jQuery核心和Chrome的JS规范有问题吗？它在Firefox中运行良好.非常感谢.
解决方法
一,正确的方法：
要在这种情况下做你想做的事,请使用vanilla JavaScript解决方案,但在IE中进行测试！
要在这种情况下做你想做的事,请使用vanilla JavaScript解决方案,但在IE中进行测试！
原因：
原因类型不起作用是因为它在IE中失败(在添加到DOM之后你不能对输入的类型进行查询,并且它以相同的方式处理),所以jQuery throws an error when you try.它专门用于<input> and <button> elements时changing the type attribute.
如果你在控制台中查看,你会看到：
Error: Uncaught type property can’t be changed
Here’s a quick test showing this,检查控制台以查看jQuery抛出的错误.
