Question

背景

好的，我有一个独特的网络应用程序，在阅读了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部分< / b>，例如.. 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()" />

添加额外的提交函数到动态填充的jquery .submit

背景

步骤跟随结束输入表单受

HTML

1 个答案: