JQuery：重用提交功能答案

【问题标题】：JQuery: Reusing submit functionJQuery：重用提交功能
【发布时间】：2012-06-29 13:12:21
【问题描述】：

嘿，伙计们，我已经尽可能多地看了，但我找不到答案，我正在创建一个管理界面，它的表格遍布各处，我想为所有表格使用相同的 jquery 代码，我有一些代码可以完成工作，但我想知道是否有更有效的方法来完成它。这是代码

    function submitForm( formname ) 
{
  $.ajax
  ({
    type:'POST', 
    url: 'session.php', 
    data: $(formname).serialize(), 
    success: function(response) 
    {
      if( $('#message_box').is(":visible") ) 
      {
        $('#message_box_msg').html ('') 
        $('#message_box').hide();
      }
      $('#message_box').slideDown();
      $('#message_box_msg').html (response);      
    }
  });
return false;
}

现在我的表单看起来像这样：

<form id="adminForm" action="session.php" method="post" onsubmit="return submitForm('#adminForm');">

现在我的问题是......有没有更简单的方法来做到这一点，比如不必每次都为 submitForm() 函数提供表单 ID？

提前致谢！

【问题讨论】：

标签： javascript jquery ajax forms dynamic

【解决方案1】：

您可能希望将处理程序委派给页面中的文档或其他永久资产，以处理任何 ajax 加载的表单。这将替换您的内联 onsubmit

$(document).on('submit','form', function(){ 

     var allowSubmit=false,
         noSubmitMessage="Can't submit", /* can change message in various places in following code depending on app*/
         $form=$(this);/* cache jQuery form object */
    if( $form.hasClass('doValidation')){
        /* class specific code to run*/    
        allowSubmit = validationFunction();
    }

    if( allowSubmit){
       var data=$form.serialize()          
       /* do ajax*/
    }else{
       /* user feedback*/ 
       alert( noSubmitMessage);
    }

return false;

});

【讨论】：

我试过了！投票需要 15 个声望，这是我的第一个问题：/ 抱歉……但谢谢！！ :D

【解决方案2】：

是的，为所有表单定义一个通用类，然后使用

$(".form_class").submit(function() {

  //stuff that gets executed on form submission ...

  return result;
})

并转储内联“onsubmit”。一般来说，这样做也更干净，因为它将视图与行为分开。

【讨论】：