Using .on() instead of .live()

Using .on() instead of .live()

I'm creating a plugin for Wordpress utilizing jQuery to handle submission of a form. My script is working fine when I use .live(), but looking at documentation, .live() has been deprecated since version 1.7 and states that I should be using .on() (which I guess I should be using since  default Wordpress 3.8 comes shipped with jQuery 1.10.2).

Problem is, .on() is not working even thought .live() was.

Here's my working .live() code:
  2. jQuery(document).ready(function( $ ) {
  3. $('#swt_createRaceTypeForm').live('submit', function(e) {
  4. alert('test');
  5. e.preventDefault();
  6. });
  7. });

Here's my .on() code which isn't working:
  2. jQuery(document).ready(function( $ ) {
  3. $('#swt_createRaceTypeForm').on('submit', function(e) {
  4. alert('test');
  5. e.preventDefault();
  6. });
  7. });
Can anyone explain why .live() is working but the same code using .on() isn't? Reason for using .live() is because I'm changing the DOM after the scripts have been loaded.

Thanks for your help