使用jQuery attr()方法设置输入框的"type"属性无效。

Question

我查看了之前的问题，但它们似乎没有回答我现在遇到的情况。
在我的实际代码中，我正在动态创建一个表单，并添加两个按钮，一个用于提交，另一个用于其他功能。为此，我将按钮的"type"属性分别设置为"submit"和"button"。问题是，在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中可以正常工作。非常感谢。

- Alejandro García Iglesias

---

在 button 上指定 type="button" 有什么意义？ - meder omuraliev

@meder它确保它不会充当“提交”按钮。 - Pointy

我只是想知道为什么你要写那么多代码，而不是简单地这样做：$('form').append('<div class="classesHash buttonsContainer"><button type="submit" class="classesHash submitButton" title="'+i18n('Filter')+'" value="'+i18n('Filter')+'"><buttons ... >') ?? - Matt Evanoff

Answer 1

首先，正确的做法是：
在这种情况下，使用纯JavaScript解决方案，但要在IE中进行测试！

---

原因:
type不起作用的原因是因为它在IE中失败了（在将输入添加到DOM后，您无法更改其type，并且它以相同的方式处理），所以当您尝试时，jQuery会抛出错误。 它在更改type属性时，特别针对<input>和<button>元素。

如果您查看控制台，则会看到以下内容：

错误：无法更改类型属性

这是一个快速测试，显示了这一点,检查控制台以查看jQuery引发的错误。

- Nick Craver

---

我知道这一点，但是对于它在Firefox中能够工作的说法有些困惑。 - Pointy

@Pointy - 我在这里用Firefox也遇到了同样的错误，也许他使用的是不同逻辑的旧版本jquery？ - Nick Craver

可能是这样的。 - Pointy

@profoundjoy - 没错，我不确定这在Firefox中如何工作...你最好的选择是最初使用<button type="button">创建元素 :) - Nick Craver

感谢大家。 @Nick Craver：我会选择单字符串解决方案。非常感谢！ - Alejandro García Iglesias

Answer 2

请使用 prop 代替 attr，这样会更可靠。

请看下面的示例代码：

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

请告诉我您对此的想法。

谢谢

- Nagendra Badiganti

Answer 3

我不是100%确定你在问什么，但我认为你在询问如何在Chrome中防止表单提交。如果是这样，为什么不使用preventDefault呢？

$("#test").click(function(e) {
  e.preventDefault();
  //more work here....
});

编辑：
我同意Nick的观点，为了实现你想要的功能，最好采用纯JavaScript的方法。但在这种情况下，你正在给一个按钮应用不合理的属性（或者至少是无效的）。既然你已经在使用jQuery，为什么不正确地处理它，并防止表单中按钮点击的默认操作呢？

- David Hoerster

---

@D Hoerster：谢谢，但我不是想阻止表单提交，我正在动态创建一个表单并附加两个按钮，一个用于提交，另一个用于其他功能。在Firefox中一切正常，但在Chrome中，两个按钮都会提交，一个带有设置为“submit”的“type”属性，另一个带有设置为“button”的“type”属性。 - Alejandro García Iglesias

Answer 4

所以这篇文章对我很有帮助，但我的解决方法是克隆相关的按钮并替换它。

$new = $(this).clone();
$new.attr('type','hidden');
$this_form.append($new);
$(this).remove();

- Traveling_Monk

Answer 5

jQuery 在 Chrome 中对我来说运行良好...今天我使用的所有函数都能正常运行，包括 .attr()...

- jcolebrand