如何将两个 jQuery 函数合二为一？答案

【问题标题】：How to combine two jQuery functions into one?如何将两个 jQuery 函数合二为一？
【发布时间】：2014-05-04 12:28:14
【问题描述】：

我在 jQuery 中有两个函数：

$(document).on('change','.states',function(){ 
  //on change of select 
});

$(document).on('click','.date_control',function(){ 
 //on click of input .date_control 
});

如何将上述两个函数组合成一个函数，以便我可以将它与我的 AJAX 函数一起使用，如下所示：

$(function() {
  $(".add_new_rebate").on("click", function(event) {
    event.preventDefault();
    var manufacturer_id =  $("#company_id").val();

    /*if($.active > 0) { //or $.active      
      request_inprogress();
    } else {*/  
      var next_rebate_no = $('.rebate_block').length + 1;
      var rebate_no      = $('.rebate_block').length + 1;

    if ($('.rebate_block').length>0) { 
      rebate_no = rebate_no+1;
    }

      $('.add_new_rebate').attr('disabled','disabled');
    //}

    $.ajax({
      type: "POST",
      url: "add_rebate_by_product.php",
      data: {'request_type':'ajax', 'op':'create_rebate', 'next_rebate_no':next_rebate_no, 'rebate_no':rebate_no, 'manufacturer_id':manufacturer_id},  
      beforeSend: function() { 
        $('.table-responsive').after("<img src='http://localhost/smart-rebate-web/web/img/ajax-loader.gif' class='load' alt='Loading...'>");
      },
      success: function(data) {
        if(jQuery.trim(data)=="session_time_out") {
        window.location.href = site_url+'admin/login.php?timeout=1';                
        } else {
          $('.rebate_block').append(data);
          $('.add_new_rebate').removeAttr('disabled');
        }
        $('.load').remove();
      }
    });    
 });   
});

如果您除了将上述两个功能合二为一之外，还有其他方法，那也可以。我的要求是将这两个函数的代码合并到上面的 AJAX 函数中，因为我正在动态生成两个 HTML 控件并且我想将 jQuery 类应用于它们。提前致谢。

【问题讨论】：

为什么不将操作（click 中的所有内容）设为函数并从两个事件处理程序中调用它？
@xFortyFourx：我没有清楚地理解你的想法，但听起来它可能会奏效。请您发布您的答案，以便我了解您的意思吗？
这个怎么样？使用通用函数，然后在 click 和 change 时调用它。例如我们使用class。 $(document).on('change','.states',function(){ //on change of select commonFunction(); }); $(document).on('click','.date_control',function(){ //on click of input .date_control commonFunction(); });

标签： javascript jquery ajax function jquery-on

【解决方案1】：

JS：

function do_action(){ 
 var manufacturer_id =  $("#company_id").val();

    /*if($.active > 0) { //or $.active      
      request_inprogress();
    } else {*/  
      var next_rebate_no = $('.rebate_block').length + 1;
      var rebate_no      = $('.rebate_block').length + 1;

    if ($('.rebate_block').length>0) { 
      rebate_no = rebate_no+1;
    }

      $('.add_new_rebate').attr('disabled','disabled');
    //}

    $.ajax({
      type: "POST",
      url: "add_rebate_by_product.php",
      data: {'request_type':'ajax', 'op':'create_rebate', 'next_rebate_no':next_rebate_no, 'rebate_no':rebate_no, 'manufacturer_id':manufacturer_id},  
      beforeSend: function() { 
        $('.table-responsive').after("<img src='http://localhost/smart-rebate-web/web/img/ajax-loader.gif' class='load' alt='Loading...'>");
      },
      success: function(data) {
        if(jQuery.trim(data)=="session_time_out") {
        window.location.href = site_url+'admin/login.php?timeout=1';                
        } else {
          $('.rebate_block').append(data);
          $('.add_new_rebate').removeAttr('disabled');
        }
        $('.load').remove();
      }
    }); 
}

$(document).on('change','.states',function(){ 
  //on change of select 
  do_action();
  return false;
});

$(document).on('click','.date_control',function(){ 
 //on click of input .date_control 
 do_action();
 return false;
});

我假设您提出问题的原因是避免在两个事件中使用相同的代码，这样会更简洁。没有重复。

【讨论】：

【解决方案2】：

我不确定我是否正确理解了这一点，但我可以定义一个function withName () {}，这样你就可以通过事件处理程序引用该函数。

这里 doStuff 在 »change« 或 »click« 上调用

function doStuff (e) {
    //the stuff to do
}

$(document).on('change','.states', doStuff);

$(document).on('click','.date_control',doStuff);

我希望这就是你所要求的……

【讨论】：

【解决方案3】：

请看这个链接：

How to combine two jQuery functions?

答案可以回答你的问题：

您只需为您的操作和您的确认使用相同的选择器

【讨论】：

【解决方案4】：

function handler(event) {
    event.preventDefault();
    var manufacturer_id =  $("#company_id").val();

    /*if($.active > 0) { //or $.active      
      request_inprogress();
    } else {*/  
      var next_rebate_no = $('.rebate_block').length + 1;
      var rebate_no      = $('.rebate_block').length + 1;

    if ($('.rebate_block').length>0) { 
      rebate_no = rebate_no+1;
    }

      $('.add_new_rebate').attr('disabled','disabled');
    //}

    $.ajax({
      type: "POST",
      url: "add_rebate_by_product.php",
      data: {'request_type':'ajax', 'op':'create_rebate', 'next_rebate_no':next_rebate_no, 'rebate_no':rebate_no, 'manufacturer_id':manufacturer_id},  
      beforeSend: function() { 
        $('.table-responsive').after("<img src='http://localhost/smart-rebate-web/web/img/ajax-loader.gif' class='load' alt='Loading...'>");
      },
      success: function(data) {
        if(jQuery.trim(data)=="session_time_out") {
        window.location.href = site_url+'admin/login.php?timeout=1';                
        } else {
          $('.rebate_block').append(data);
          $('.add_new_rebate').removeAttr('disabled');
        }
        $('.load').remove();
      }
    });    
 }


$(document).on('change','.states', handler);
$(document).on('click','.date_control', handler);

【讨论】：

【解决方案5】：

如果我正确理解了您的要求，那么以下应该可以工作：

$( '.states, .date_control' ).on( 'click change',  function ( event ) {
    if( ( event.type == 'change' && event.target.className == 'states' )
        || ( event.type == 'click' && event.target.className == 'date_control' ) ) {
        //process event here
    };
} );

【讨论】：