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中失败（在添加到DOM之后你不能对输入的type进行处理，并且它以相同的方式处理），所以{ {3}}。它在jQuery throws an error when you try时专门为<input> and <button> elements执行此操作。

如果您查看控制台，您会看到：

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

changing the type attribute，检查控制台以查看jQuery抛出的错误。

Answer 2

使用道具代替 attr 。它肯定会起作用。

请查看以下示例代码：

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

让我知道你对此的看法。

由于

Answer 3

我不是百分百肯定你在问什么，但我认为你要求阻止在Chrome中点击按钮提交表单。如果是这种情况，为什么不使用preventDefault？

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

修改
我同意Nick的意见，为了做你想做的事，请采用直接的JavaScript方法。但在这种情况下，您将属性应用于一个没有意义（或至少无效）的按钮。由于您已经在使用jQuery，为什么不正确处理它并阻止表单中按钮单击的默认操作？

Answer 4

jQuery对我来说在Chrome中工作正常...我今天抛出的所有功能都运行得很好，包括.attr（）......

Answer 5

所以这篇文章对我有帮助，但我的解决方案是克隆有问题的按钮并替换它

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

设置输入的“type”属性不适用于jQuery attr（）方法

5 个答案: