Как объединить две функции jQuery в одну?

У меня следующие две функции в 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. Заранее спасибо.

Источник

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

Я предполагаю, что причина, по которой вы задали вопрос, состоит в том, чтобы избегать использования одного и того же кода внутри обоих событий, таким образом, это намного чище. Нет повторения.

Источник

Если я правильно понял ваше требование, то должно работать следующее:

$( '.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
    };
} );
Источник

Я не уверен, что правильно понял смысл, но я могу определить function withName () {}, так что вы можете ссылаться на эту функцию, не используя обработчики событий.

Вот doStuff вызывается либо "изменить", либо "нажать"

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

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

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

Я надеюсь, что это то, что вы просите...

Источник 
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);
Источник

Пожалуйста, смотрите эту ссылку:

Как совместить две функции jQuery?

И ответ может ответить на ваш вопрос:

вы просто используете один и тот же селектор как для своего действия, так и для подтверждения

Источник
Другие вопросы по тегам