表单提交上的 JQuery 自定义功能 - 不起作用答案

【问题标题】：JQuery custom function on form submit - not working表单提交上的 JQuery 自定义功能 - 不起作用
【发布时间】：2014-02-28 06:44:25
【问题描述】：

我有一个要在 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 错误——看起来它只是没有绑定提交处理程序。非常感谢任何和所有的帮助！

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

【问题讨论】：

标签： javascript jquery jquery-mobile

【解决方案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>

【讨论】：

如果使用按钮但不使用type属性，则默认值为“submit”。
@HolgerThiebosch 不适用于 IE7 及以下版本。
我签入了 IE9。我的错。 ;-)
@rakhi4110 谢谢，在准备好文档时包装它正是缺少的步骤。另外，感谢您对旧版跨浏览器兼容性的提醒——我敢肯定，当我到达那里时，我的头发会撕裂：-)

【解决方案2】：

试试这个

 $('#saveFillup').click(function () {
  //your code here
 });

【讨论】：

【解决方案3】：

只需添加：

$(document).ready(function(){
    $('#frmFillup').submit(
        function (e) {
            e.preventDefault();
            e.stopImmediatePropagation();
            console.log('submit catched: ', e);
        }
    );
});

我已经测试过了，IE、FF、Chrome 当按钮没有 type= 时，默认提交。这样就可以了。表单获得提交事件。

【讨论】：