Should I catch button click or form submit when using jQuery and AJAX?
<p>Assume this simple HTML form:</p>

<pre><code>        &lt;form id="settings-form"&gt;
            &lt;label&gt;
            Input data:
            &lt;input name="data"/&gt;
            &lt;/label&gt;
            &lt;button id="submit-btn"&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
</code></pre>

<p>I want to submit this form using jQuery and AJAX, so the page will not be refreshed. You can do this in at least these two ways:</p>

<p><strong>1.</strong> Attaching an event handler to the actual submission of the form:</p>

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

<p>Here, I'd add <code>type='submit'</code> to button <code>submit-btn</code>.</p>

<p><strong>2.</strong>  Attaching an event handler to the button:</p>

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

<p>And here, <code>submit-btn</code> gets <code>type='button'</code></p>

<p>My question is: Which option is better and why? This is not about which <code>type</code> attribute value is better for the <code>button</code> in this case, but why event handler 1 is better than 2 or vice-versa.</p>