设置输入的"type"属性不适用于jQuery attr()方法

Question

我查看过以前的问题,但他们似乎没有回答我发生的事情.
在我的真实代码中,我正在创建一个表单并添加两个按钮,一个用于提交,另一个用于其他功能.为此,我将按钮的"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中运行良好.非常感谢.

Answer 1

首先,正确的方法:
在这种情况下做你想做的事情,使用vanilla JavaScript解决方案,但在IE中进行测试!

原因:
原因type不起作用是因为它在IE中失败(type在添加到DOM之后你不能对输入进行处理,并且它以相同的方式处理),所以当你尝试时jQuery会抛出一个错误.它在更改属性时专门为<input>和<button>元素执行此操作.type

如果你在控制台中查看,你会看到:

错误:无法更改未捕获的类型属性

这是一个显示此问题的快速测试,请检查控制台以查看jQuery抛出的错误.

Answer 2

使用prop而不是attr.它肯定会起作用.

请看下面的示例代码:

$("input[name='email']").focusin(function() {
           console.log("alert");
            $('#email').prop('type','number');
});

让我知道你对此的看法.

谢谢