表单重置按钮与jQuery重置冲突

Question

我遇到奇怪的事情。 我有以下表格：

<form id="addExpenseForm" name="addExpenseForm" data-bind="submit: addExpense">
    <input type="submit" value="Add" class="save" id="submit" name="submit" />
    <input type="reset" value="Reset" class="reset" id="reset" name="reset" />
</form>

如您所见，里面有一个reset按钮，用于清除所有form 。

---

我正在使用Knockout.js绑定form的submit并form这种方式reset它...

self.addExpense = function (formElement) {
  $('#addExpenseForm')[0].reset();
};

一切似乎都很好，但是我遇到了这个错误：

Uncaught TypeError: Property 'reset' of object #<HTMLFormElement> is not a function 

而且我不知道为什么得到这个，因为我的代码是正确的，而奇怪的是，当删除reset按钮时，代码可以正常工作。

我该如何解决？ 同时使用reset()方法和reset按钮是否存在某种冲突？

要知道，我做了这个jsfiddle来测试去掉reset按钮并验证我在这里要问的内容。

http://jsfiddle.net/oscarj24/vWNf7/

Answer 1

是的，这里有很大的不同。 使用jQuery时，通过jQuery样式（exp。$（“ addExpenseForm”））调用的DOM元素具有“属性”。 这些属性的编写和添加方式取决于Element及其用途（以及各处的其他内容，但这是另一堂课）。

只需说一句，当您从无重置按钮创建时，“属性”重置确实是一种功能 ！ 查询时它将返回以下值： function reset() { [native code] } 。

但是，当您手动添加按钮（也就是将其放置在HTML中）时，则重置将成为该按钮而非功能。 换句话说，它将返回类似<input type="reset" value="Reset" class="reset" id="reset" name="reset" /> 。

这是你的问题...

如果按钮是通过HTML添加的，则使用：

$('#addExpenseForm')[0].reset.click();

否则，Button不是type="reset" ，而只是说“ reset”的按钮或根本没有按钮！ 采用：

$('#addExpenseForm')[0].reset();

要么

将所有内容包装在一个大的if语句中！

typeof $("#addExpenseForm")[0].reset == "function" ? $("#addExpenseForm")[0].reset() : $("#addExpenseForm")[0].reset.click();

仅针对咧嘴笑和傻笑，这是一行中的IF语句：

 typeof $("#addExpenseForm")[0].reset == "function" ? $("#addExpenseForm")[0].reset() : $("#addExpenseForm")[0].reset.click(); 

Answer 2

将重置按钮ID属性从“重置”更改为其他任何内容。

请参阅此处以了解收到错误的原因： https : //stackoverflow.com/a/12541054/492325

Answer 3

尝试这个

$('#resetBtn').on('click', function(e){
    e.preventDefault();
    $("#myform")[0].reset.click();
}