如何將兩個jQuery函數合二為一？

Question

我在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類應用於它們。 提前致謝。

Answer 1

我不確定我是否正確理解了這一點，但是我可以定義一個function withName () {} ，以便可以從事件處理程序中引用該函數。

在此處， doStuff可以通過»change«或»click«來調用

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

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

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

我希望這就是您要的...

Answer 2

請查看此鏈接：

如何結合兩個jQuery函數？

答案可以回答您的問題：

您只需對操作和確認使用相同的選擇器

Answer 3

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);

Answer 4

如果我正確理解了您的要求，那么以下方法應該起作用：

$( '.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
    };
} );

Answer 5

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;
});

我假設您問這個問題的原因是為了避免在兩個事件中使用相同的代碼，這樣更加干凈。 不再重復。