Javascript 如何防止从AJAX响应中调用相同的jQuery函数，并使jQuery功能可行？

我有一个HTML表单。当页面加载时，它只包含一个

，我正在调用AJAX函数来追加

。但是当页面加载时可以处理HTML内容的javascript不能处理我通过AJAX附加的内容。因此，为了使jQuery功能在通过AJAX响应附加的内容上可行。我在AJAX响应中重写了相同的函数。现在问题出现了。调用我在

$（document）.ready（function{…}）

中编写的函数以及我在AJAX响应中编写的相同函数。也就是说，函数会被反复调用。AJAX中的函数被调用的数量与我附加的

数量完全相同。如何避免这种情况，并使jQuery功能在所有元素（包括使用AJAX添加的元素）上都可用？以下是我的代码，供您参考：

//Below is the function code which I written when document is ready
$(document).ready(function() {
  $('.products').click(function () {
    var table_id = $(this).closest('table').attr('id');

    var no = table_id.match(/\d+/)[0];            
    //var first_row = $(this).closest('table').find('tbody tr:first').attr('id');
    var first_row = $('#'+table_id).find('tbody tr:first').attr('id');

    var new_row = $('#'+first_row).clone();
    //var tbody = $('tbody', '#'+table_id);
    var tbody = $('#' + table_id + ' tbody');
    var n = $('tr', tbody).length  + 1;
    new_row.attr('id', 'reb' + no +'_'+ n);

    $(':input', new_row).not('.prod_list').remove();
    $('select', new_row).attr('name','product_id_'+no+'['+n+']');
    $('select', new_row).attr('id','product_id_'+no+'_'+n);
    $('<button style="color:#C00; opacity: 2;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">&times;</button>').appendTo( $(new_row.find('td:first')) );
    tbody.append(new_row);
    $('.delete').on('click', deleteRow);
   });
});

//Below is the AJAX function code which I'm using to append content. It also contains the same above function code


  function add_rebate_by_product() {
  if($.active > 0) { //or $.active      
    request_inprogress();
  } else {
    var manufacturer_id =  $("#company_id").val();
    var rebate_no       =  $('.rbt').length;

    if ($('.rbt').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', 'rebate_no':rebate_no, 'manufacturer_id':manufacturer_id},  
      beforeSend: function() { 
        $('.load_img').html("<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');

          $('.states').multiselect({
            includeSelectAllOption: true,
            maxHeight: 150
          });
          $(".date_control").datepicker({
            dateFormat: "yy-mm-dd"
          });
          $('.products').click(function () {
            var table_id = $(this).closest('table').attr('id');

            var no = table_id.match(/\d+/)[0];            
            //var first_row = $(this).closest('table').find('tbody tr:first').attr('id');
            var first_row = $('#'+table_id).find('tbody tr:first').attr('id');

            var new_row = $('#'+first_row).clone();
            //var tbody = $('tbody', '#'+table_id);
            var tbody = $('#' + table_id + ' tbody');
            var n = $('tr', tbody).length  + 1;
            new_row.attr('id', 'reb' + no +'_'+ n);

            $(':input', new_row).not('.prod_list').remove();
            $('select', new_row).attr('name','product_id_'+no+'['+n+']');
            $('select', new_row).attr('id','product_id_'+no+'_'+n);
            $('<button style="color:#C00; opacity: 2;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">&times;</button>').appendTo( $(new_row.find('td:first')) );
            tbody.append(new_row);
            $('.delete').on('click', deleteRow);
            });         
        }
        $('.load').remove();
      }
    });
//}
}

//下面是我在文档准备就绪时编写的函数代码
$（文档）.ready（函数（）{
$（'.products'）。单击（函数（）{
var table_id=$（this）.closest（'table'）.attr（'id'）；
变量号=表id.match（/\d+/）[0]；
//var first_row=$（this）.closest（'table'）.find（'tbody tr:first'）.attr（'id'）；
var first_row=$（'#'+表id）.find（'tbody tr:first'）.attr（'id'）；
var new_row=$（'#'+第一行）。clone（）；
//var tbody=$（'tbody'，'#'+表id）；
var tbody=$（'#'+表id+'tbody'）；
变量n=$（'tr'，tbody）.length+1；
新行属性（'id'，'reb'+no+'+n）；
$（'：input'，new_行）。不是（'.prod_列表'）。删除（）；
$（'select'，new_row）.attr（'name'，'product_id_'+no+'['+n+']）；
$（'select'，new_row）.attr（'id'，'product_id'+no+'+n）；
$（'×；'）.appendTo（$（new_row.find（'td:first'））；
tbody.append（新行）；
$（'.delete'）。在（'click'，deleteRow'）；
});
});
//下面是我用来附加内容的AJAX函数代码。它还包含上述相同的功能代码
函数按产品添加回扣（）{
如果（$.active>0）{//或$.active
请求_inprogress（）；
}否则{
var制造商id=$（“#公司id”）.val（）；
风险值回扣编号=$（'.rbt'）。长度；
如果（$（'.rbt'）.length>=0）{
返利编号=返利编号+1；
}
$（'.add_new_retain'）.attr（'disabled'，'disabled'）；
}
$.ajax({
类型：“POST”，
url:“add_retain_by_product.php”，
数据：{'request_type'：'ajax'，'op'：'create_retain'，'retain_no'：retain_no，'manufacturer_id'：manufacturer_id}，
beforeSend:function（）{
$（'.load_img'）.html（“”）；
},
成功：功能（数据）{
if（jQuery.trim（data）=“会话超时”）{
window.location.href=site_url+'admin/login.php？超时=1'；
}否则{
$（'.retain_block'）。追加（数据）；
$（'.add_new_retain'）。removeAttr（'disabled'）；
$（“.states”）.multiselect({
includeAlloption:true，
最大高度：150
});
$（“.date\u控件”）.datepicker({
日期格式：“年月日”
});
$（'.products'）。单击（函数（）{
var table_id=$（this）.closest（'table'）.attr（'id'）；
变量号=表id.match（/\d+/）[0]；
//var first_row=$（this）.closest（'table'）.find（'tbody tr:first'）.attr（'id'）；
var first_row=$（'#'+表id）.find（'tbody tr:first'）.attr（'id'）；
var new_row=$（'#'+第一行）。clone（）；
//var tbody=$（'tbody'，'#'+表id）；
var tbody=$（'#'+表id+'tbody'）；
变量n=$（'tr'，tbody）.length+1；
新行属性（'id'，'reb'+no+'+n）；
$（'：input'，new_行）。不是（'.prod_列表'）。删除（）；
$（'select'，new_row）.attr（'name'，'product_id_'+no+'['+n+']）；
$（'select'，new_row）.attr（'id'，'product_id'+no+'+n）；
$（'×；'）.appendTo（$（new_row.find（'td:first'））；
tbody.append（新行）；
$（'.delete'）。在（'click'，deleteRow'）；
});         
}
$（'.load'）.remove（）；
}
});
//}
}

---

我在AJAX响应体中编写了与调用AJAX时相同的javascript函数，javascript对象被破坏，我们需要再次重新创建javaceript对象，以使jQuery功能可行。但是我面临的问题是函数被多次调用，而不是只有在请求时才被调用一次。请在这方面帮助我。提前谢谢。我需要关于这个问题的更多信息，我也可以提供给你

我想指出的第一件事是，您所做的错误是在代码中的不同位置两次编写相同的jQuery函数。这是不必要的代码冗余。这是一种非常糟糕的编程风格。如果您按照以下方式编写函数，您将使一切正常工作。还要删除在AJAX响应中编写的相同函数代码

$(function () {
  $(document).delegate('.products','click',function (e) {
    var table_id = $(this).closest('table').attr('id');

    var no = table_id.match(/\d+/)[0];            
    //var first_row = $(this).closest('table').find('tbody tr:first').attr('id');
    var first_row = $('#'+table_id).find('tbody tr:first').attr('id');

    var new_row = $('#'+first_row).clone();
    //var tbody = $('tbody', '#'+table_id);
    var tbody = $('#' + table_id + ' tbody');
    var n = $('tr', tbody).length  + 1;
    new_row.attr('id', 'reb' + no +'_'+ n);

    $(':input', new_row).not('.prod_list').remove();
    $('select', new_row).attr('name','product_id_'+no+'['+n+']');
    $('select', new_row).attr('id','product_id_'+no+'_'+n);
    $('<button style="color:#C00; opacity: 2;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">&times;</button>').appendTo( $(new_row.find('td:first')) );
    tbody.append(new_row);
    $('.delete').on('click', deleteRow);

  });  
});

$（函数（）{
$（文档）.delegate（“.products”，“click”，函数（e）{
var table_id=$（this）.closest（'table'）.attr（'id'）；
变量号=表id.match（/\d+/）[0]；
//var first_row=$（this）.closest（'table'）.find（'tbody tr:first'）.attr（'id'）；
var first_row=$（'#'+表id）.find（'tbody tr:first'）.attr（'id'）；
var new_row=$（'#'+第一行）。clone（）；
//var tbody=$（'tbody'，'#'+表id）；
var tbody=$（'#'+表id+'tbody'）；
变量n=$（'tr'，tbody）.length+1；
新行属性（'id'，'reb'+no+'+n）；
$（'：input'，new_行）。不是（'.prod_列表'）。删除（）；
$（'select'，new_row）.attr（'name'，'product_id_'+no+'['+n+']）；
$（'select'，new_row）.attr（'id'，'product_id'+no+'+n）；
$（'×；'）.appendTo（$（new_row.find（'td:first'））；
tbody.append（新行）；
$（'.delete'）。在（'click'，deleteRow'）；
});  
});