表单重置按钮与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绑定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样式调用的DOM元素(exp.$("addExpenseForm"))被赋予"属性".如何编写和添加这些属性取决于元素及其使用(以及其他内容,但这是另一个教训).

可以这么说,当你创建一个没有重置按钮,然后"属性"重置确实是一个功能!查询时它将返回以下值:function reset() { [native code] }.

但是,当您手动添加按钮时(也就是将它放在HTML中),然后重置变为那个按钮而不是一个功能.换句话说,它将返回类似的东西<input type="reset" value="Reset" class="reset" id="reset" name="reset" />.

这是你的问题......

如果通过HTML添加BUTTON然后使用:

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

否则,按钮不是type="reset",而只是一个按钮,表示"重置"或根本没有按钮!使用:

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

要么

将它全部包含在一个大的if语句中!

if (typeof $('#addExpenseForm')[0].reset == "function") {
    $('#addExpenseForm')[0].reset();
}
else {
    $('#addExpenseForm')[0].reset.click();
}

而对于Grins和giggles,这里的IF语句是一行:

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