jquery - 使用 jQuery 和 AJAX 时我应该捕捉按钮单击或表单提交吗？

Question

假设这个简单的 HTML 表单:

        <form id="settings-form">
            <label>
            Input data:
            <input name="data"/>
            </label>
            <button id="submit-btn">Submit</button>
        </form>

我想使用 jQuery 和 AJAX 提交此表单，因此页面不会刷新。您至少可以通过以下两种方式来做到这一点:

1.将事件处理程序附加到表单的实际提交:

    $("#settings-form").submit(function(event){
        event.preventDefault();
        var data = $(this).serialize();
        //Ajax code here
    });

在这里，我将 type='submit' 添加到按钮 submit-btn。

2.将事件处理程序附加到按钮:

    $("#submit-btn").click(function(){
        var data = $("#settings-form").serialize(); // or this.closest("form").serialize()
        //Ajax code here
    });

在这里，submit-btn 获取 type='button'

我的问题是:哪个选项更好，为什么？在这种情况下，这不是关于哪个 type 属性值更适合 button，而是为什么事件处理程序 1 比 2 更好，反之亦然。

Answer 1

表单可以通过多个来源提交，而不仅仅是通过单击提交按钮(例如:手动调用 $("form").submit() 或按 Enter).

使用第一个选项可确保您捕获该表单上所有可能的提交，而第二个选项仅在单击按钮时阻止提交。由您决定需要哪一个。

就性能而言，没有区别。