Adding extra submit function to dynamically populated jquery .submit

Question

Background

Okay, I have a unique web application, and after reading around on SO and some great other questions, I am still scratching my head as to how I can accomplish this feat. The end result: I must add a cancel button to a form which has populated input fields dynamically after a link click... It is a third stage function which is being activated, and must be able to be run solely within the context of the dynamic form (because there are other modal form windows on the same page)... please follow below for the flow. Any suggestions are much appreciative.

Steps Followed that end input form is affected by

1) User clicks on a link.  
2) Modal window opens with dynamically populated fields
3) AJAX/JSON method pulls information through mysql
4) div's and spans populated inside modal window
5) Edit links are added for corresponding fields... Registers event handler to listen to user either clicking "edit", or closing modal window.
6) If user clicks edit, input fields appear, as well as a submit button.
7) on submit, 
   a)  deactivate all other event handlers on other "edit" links
   b)  send ajax/json
   c)  activate all other event handlers
   d)  hide all input fields and 'reset' the modal window for next item edit

html

<form id="updation_station" action=''>
<div class="view_info">
    Test 1:<span class="view_test_1"></span>
    <a href="#" class="edit_link" data-link="edit_test_1_input" data-column="column_1">Edit</a>
    <span class="edit_test_1_input"><input type='text' name='test_1_input' /></span>            
 </div>

 <div class="view_info">
     test_2:<span class="view_test_2"></span>
    <a href="#" class="edit_link" data-link="edit_test_2_input" data-column="test_2">Edit</a>
    <span class="edit_test_2_input"><input type='text' name='test_2_input' /></span>            
  </div>                        

   <input type="submit" name="update" id="change_btn" value="Save Changes" />
   <input type="submit" name="cancel" id="cancel_btn" value="Cancel" />
</form>

In order to accomplish what I needed, I run $('.edit_link').on('click', doUpdate); to execute the function of the updater... as follows

function doUpdate(e) {
// show input fields, sets variables, etc....    

    // Turn off the event handler for all the other edit links
    $('.edit_link').not(this).off('click', doUpdate);

    //Now open the listener for the submit form
        $('#updater').submit(function() {
              //Now close the editing fields
                      //closes edit fields, etc...
                  $.ajax({//do something    });
             //Now reset the event handlers so the links are re-activated regardless of what was clicked
        $.ajax().always(function() {
             $('.edit_link').on('click', doUpdate);
        });
        return false;  
        });
// hides input fields, etc.... and tells client to go on merry way     

};

Unfortunately, I am extremely weary to change the $('#updater').submit(function() { action itself due to complications with some other omitted functionality... I would prefer to only append functions to it and/or touch the html portion, such as..if ($submitted_value == "cancel") { //cancel} else {//act}, but that seems to be an issue because any submit button itself will activate the form itself.

Anyone have any ideas? Snippets That may help? Hopefully the experts of SO will be a better guide on how I can go about this... Thank you in advance.

Answer 1

May not be best practice.. but might work

anonymous call
<input type="button" name="cancel" id="cancel_btn" value="Cancel" onclick="$(this).parent().hide()" />

anonymous if two elements deep
<input type="button" name="cancel" id="cancel_btn" value="Cancel" onclick="$(this).parent().parent().hide()" />

hide by div id or class
<input type="button" name="cancel" id="cancel_btn" value="Cancel" onclick="$(".formDiv").hide()" />