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在“更改”或“点击”

上调用

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

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

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

我希望这就是你要求的......

Answer 2

请看这个链接：

How to combine two jQuery functions?

答案可以回答你的问题：

您只需对动作和确认使用相同的选择器

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

我假设你问这个问题的原因是为了避免在两个事件中使用相同的代码，这样，它就更清晰了。没有重复。

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

5 个答案: