What is the difference between $ (form) .submit and $ (form) .on ("submit") in jQuery?

Question

I wrote the following code that does not result in an AJAX call in my browser:

$(document).ready(function () { $('form').submit(function(event) { event.preventDefault(); var action = $(this).attr('action'); var data = $(this).serialize(); $.post(action, data, function(response) { $("#die").html(response); }); }); }); 

However, my real-time instructor encoded the following code in a class that works:

 $(document).ready(function () { $("form").on("submit", function(event) { event.preventDefault(); var action = $(this).attr("action"); var formData = $(this).serialize(); $.post(action, formData, function(responseContent) { $("#die").html(responseContent); }); }); }); 

As far as I can tell, the only significant difference between my code and its use is the use of 'on' vs. 'submit' on line 2. In fact, on api.jquery.com/submit, the jQuery Foundation that this method is a shortcut to .on ('submit', handler) ... ". Which leaves me confused as to why the two excerpts behave differently.

Answer 1

If you look at jQuery . submit () docs

  This method is a shortcut for .on ('submit', handler) 

They behave the same

As you can see in jQuery's internal code, using the shortened version will internally call .on()

 jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " + "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) { // Handle event binding jQuery.fn[ name ] = function( data, fn ) { return arguments.length > 0 ? this.on( name, null, data, fn ) : this.trigger( name ); }; }); 

Answer 2

Note. .on() and .off() are the latest jQuery syntaxes at the time of writing (August 2014).

If you are using jQuery 1.7 or higher, the .bind() , .delegate() and .live() should NOT be used. The same goes for .unbind() , .undelegate() and .die() .

---

Introduction:

Similar to jQuery .on('click') vs .click() using .on('submit') vs .submit() adds a number of advantages:

In the answer .on('click') vs .click() from andreister he indicates that memory usage is less, I expect the same for .on('submit') vs .submit() .

But the much more significant advantages for .on('submit') vs .submit() are a kind of “software usability”:

• Work with dynamically added items
• the namespace andreister is also mentioned (which I indicated in the comments to it)

See the examples using the examples below to see how it all works.

---

Working with dynamically added elements: Use case 1

see the live demo (click "Run / Clear" in the upper right corner) on jsbin.com/puqahunovido/1/edit?html,js,console

Basically, you can tell jQuery to "watch" if the element has any of its children (direct or not). This is especially useful if you are dynamically adding new forms to this element. Then you do NOT need to "intercept" this new form with the jQuery handler.

---

Namespaces: Case Study 1

see the real-time demo (click "Run / Clean in the upper right corner") on jsbin.com/xalenefilifi/1/edit?html,js,console

 /* bind form submission to 2 jQuery event handlers, each having a different namespace */ $(".js-form-hook-xyz").on("submit.hey", function() { console.log("hey!"); }); $(".js-form-hook-xyz").on("submit.hello", function() { console.log("hello!"); }); $(".js-form-hook-xyz").submit(); /* point 1: displays "hey!hello!" */ /* ... later in the code, unbind form submission for ONLY 1 handlers */ $(".js-form-hook-xyz").off("submit.hello"); $(".js-form-hook-xyz").submit(); /* point 2: displays "hey!" */ 

As a result, if the form is submitted at point 1, both handlers are attached, so they are called. And later, in "point 2", the "submit.hello" handler is no longer attached, so only another handler starts.

---

Namespaces: Case Study 2:

see the real-time demo (click Run / Clean in the upper right corner) on jsbin.com/vubolacozuwe/1/edit?html,js,console

 /* bind form submission to 2 jQuery event handlers, each having the SAME namespace */ $(".js-form-hook-xyz").on("submit.greetings", function() { console.log("Bonjour!"); }); $(".js-form-hook-xyz").on("submit.greetings", function() { console.log("Hola!"); }); $(".js-form-hook-xyz").submit(); /* point 1: displays "Bonjour! Hola!" */ /* ... later in the code, unbind form submission for ".greetings" namespace handlers */ $(".js-form-hook-xyz").off(".greetings"); $(".js-form-hook-xyz").submit(); /* point 2: displays nothing, handlers were removed */ 

As a result, if the form is submitted at point 1, both handlers are attached, so they are called. And later, in the "point 2" handler, the .greetings handlers were deleted, so nothing is displayed.

---

There may be even cooler use cases that I could think of, so I will leave this at a different time. Just check out your jQuery doc and find related topics on SO or Google. You will find a bunch of interesting things, I'm sure.

Resources

• Difference between .on ('click') vs .click ()
• How to unbind a specific event handler
• http://api.jquery.com/on/#event-names
• api.jquery.com/on
• api.jquery.com/submit

Answer 3

You are right, these two should work the same. The difference between $ (form) .submit and $ (form) .on ("submit") is probably not a problem here. Check the console log and execute the code?