添加自定义类后 HTML 输入类型提交奇怪的行为

Question

我的页面上有一个带有提交按钮的表单:

<form id="searchForm">
    <input id="searchTerm" type="text" name="searchterm" class="search-field"/>
    <input type="submit" value="Submit"/>
</form>

当我点击按钮时，我成功提交了表单并触发了 jQuery 函数:

$('#searchForm').submit(function() {
    some code...
});

无缘无故，当我添加一个自定义类来更改按钮外观时，它停止触发提交功能，就像以前一样:

<input type="submit" value="Submit" class="submit-search"/>

该类添加了以下属性:

#search .main .search-bar .submit-search {
    margin-top: 2.3rem;
}

#search .main .search-bar .submit-search {
    background-color: transparent;
    background-image: url("../../css/sprites/search-submit-icon.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    border: medium none;
    display: inline-block;
    font-size: 0;
    height: 20px;
    margin: 10px;
    outline: medium none;
    padding: 0;
    width: 20px;
}

我将不胜感激任何使这项工作有效的想法。

Answer 1

单击按钮时将执行两个函数。首先它执行单击事件上的函数 checkTextField()，然后当它完成时执行表单提交事件上的其他函数。我认为这不是一个好主意。您应该删除 onclick 函数并将其添加到表单提交中。