Why am I unable to call the jQuery function?

Question

I'm using jquery-1.9.1.min.js . My HTML is as follows:

<div id="practice_sheet">
    <form name="manage_practice_sheet" id="manage_practice_sheet" action="practice_sheet.php" method="post" >
blah blah blah
blah blah blah
blah blah blah
blah blah blah
<input type="submit" name="btn_submit" id="btn_submit" value="{$submit_value}" class="submit c-btn">
</form>
</div>

The jQuery code is as follows :

$('#practice_sheet form').on('submit', function() { alert("Hello");
    if($.active > 0) { //or $.active 
        request_inprogress();
        return false;
    } else {
     $('.submit').attr('disabled', 'disabled'); 
     show_request('#practice_sheet_loader');
     $('html, body').animate({
         scrollTop: $('#practice_sheet_error_msgs').offset().top
     }, 600);   

     var op = $('#op').val();

     var practice_sheet_category_id = $('#hidden_practice_sheet_category_id').val();


     $.ajax({
         type: $(this).attr('method'),
         url: $(this).attr('action'),
         data:$(this).serialize(),
         dataType: 'json',
         success: function(responseText) { 
         $('.submit').removeAttr('disabled', 'disabled');         
         remove_request('#practice_sheet_loader');
         $.each(responseText, function(array_key, array_val) { 
         if(array_key=='error_message') {
                var error = clean_error_messages(array_val);
                $('#practice_sheet_error_msgs').fadeIn('fast');
                $('#practice_sheet_error_msgs').html(error);
         } else if(array_key=='success_message') {
           if(op=='add')
             document.location.href ="practice_sheet.php?add_practice_sheet_suc=1&op=&practice_sheet_category_id="+practice_sheet_category_id;
           else           
             document.location.href ="practice_sheet.php?edit_practice_sheet_suc=1&op=&practice_sheet_category_id="+practice_sheet_category_id;
           return false;
         }
        });

     } 
     }); 
     return false;
    }
});

I'm not understanding why I'm not able to call this function on form submit. I tried replacing live() with on() but it didn't work. Can you help me with this? Thanks in Advance.

Answer 1

First, remember to put your code on the page load event:

$(function () {
   // All your stuff here.
});

Second, as you're overriding the form submit default behavior, you need to stop it:

// Add this to your first line within the click event handler:
e.preventDefault();

Answer 2

I think your form is submitting, that's why function is not executed, try to preventDefault, and then submit it at the end of your function if needed (but as i can see, you return false anytime, so maybe you don't need it...):

$('#practice_sheet form').on('submit', function(e) { 
   e.preventDefault();
   //.... Your code here
});