表單重置按鈕與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();
}