向动态填充的jQuery .submit添加额外的提交功能

Question

背景

好的，我有一个独特的Web应用程序，并且在阅读了SO之类的问题以及其他一些很棒的问题之后，我仍然在思考如何实现这一壮举。 最终结果： 我必须在链接单击后动态填充输入字段的表单中添加一个取消按钮 。这是一个正在激活的第三阶段函数，必须能够仅在表单上下文中运行动态表单（因为同一页面上还有其他模式表单窗口）...请按照以下流程进行操作。 任何建议都是令人赞赏的。

遵循的步骤是，最终输入表单受以下因素影响

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>

为了完成我所需要的，我运行$('.edit_link').on('click', doUpdate); 执行更新程序的功能...如下

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     

};

不幸的是，我非常厌倦更改$('#updater').submit(function() {动作本身，因为其他一些省略的功能很复杂...我宁愿只向其添加功能和/或触摸html部分 ，例如.. if ($submitted_value == "cancel") { //cancel} else {//act} ，但这似乎是一个问题，因为任何提交按钮本身都会激活表单本身。

有人有想法么？ 片段可能有帮助吗？ 希望SO的专家能够为我提供更好的指导...谢谢您。

Answer 1

可能不是最佳做法。但可能会起作用

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()" />