javascript - 表单提交上的 JQuery 自定义函数 - 不起作用

Question

我有一个自定义函数，我正在尝试在 JQuery Mobile 混合应用程序中使用它。当提交表单时，我希望触发我的函数，而不是默认处理程序。

我有以下表格:

<form id="frmFillup">
        <label for="odReading">Total Odometer Reading:</label>
        <input type="number" data-clear-btn="true"
            name="odReading" id="odReading" value="1">

        <label for="fuelReading">Total Fuel:</label>
        <input type="number" data-clear-btn="true"
            name="fuelReading" id="fuelReading" value="1">

        <label for="totalPrice">Total Price:</label>
        <input type="number" data-clear-btn="true"
            name="totalPrice" id="totalPrice" value="1">

        <label for="stationAddress">Station address:</label>
        <textarea
            name="stationAddress" id="stationAddress">1 main st</textarea>

        <button data-theme="a" name="saveFillup" id="saveFillup">Save Fillup</button>
    </form>

我在 HTML 页面顶部安装了一个监听器:

    $('#frmFillup').submit(
        function (e) {
                e.preventDefault();
                e.stopImmediatePropagation();
                alert('Saving!!');
                saveFillup();
        }
    );

但是，默认的提交函数似乎仍在触发，并且我的自定义函数永远不会被触发(我的自定义事件监听器中也没有收到警报框)。 Chrome 开发工具不会在控制台中显示任何 JavaScript 错误——看起来它只是没有绑定(bind)提交处理程序。非常感谢任何及所有帮助!

完整代码位于 github 上 https://github.com/cristoslc/petrolog/blob/master/www/index.html

Answer 1

您的事件可能未附加到该按钮。尝试将代码包装在准备好的文档中

$(document).ready(function(){
     $('#frmFillup').submit(function (e) {
         e.preventDefault();
         alert('Saving!!');
         saveFillup();
     });
});

在 IE 7 及以下版本中，按钮的默认类型不是“提交”。因此，您应该考虑向按钮添加 type="submit"以确保它在所有浏览器中都能正常工作。

<button type="submit" data-theme="a" name="saveFillup" id="saveFillup">Save Fillup</button>