JQuery事件每次翻倍

Question

$('.add_instruction_btn').click(function(e){ 
        e.preventDefault(); 
        var ins_content=$('#add_instructions').val(); 
        var id=$('.useri').val(); 
        if(ins_content!="") 
        { 
         //write new instructions to database 
         var id=$('.useri').val(); 
         var data="job_id="+job_idx+"&ins="+ins_content+"&client_id="+id+"&key=2"; 
         $.ajax({ 
          type:"POST", 
          url:"admin_includes/get_instructions.php", 
          data:data, 
          success:function(html2){ 
           alert(html2); 
          } 
         });//end ajax 

        } 
        return false; 
       }); 

我似乎已经尝试了evrything来每次单击按钮时都加倍停止事件。代码最初是在另一个打开“弹出式”样式框的函数中，但即使我将它移动到函数之外，它仍然看起来像泡泡一样。

根据要求： -

$(document).on('click', '.bottom_links .lister a', function(e){ 
     //e.preventDefault(); 
     //e.stopPropagation(); 
     $('.ind_ins').text(""); 
     var ident=$(this).data('ref1'); 
     if(ident==1){ 
      var job_idx=$(this).data('job_id'); 
      var cl_name=$(this).data('cl_name'); 
      var icon_stat=$(this).data('img_id'); 
      var id=$('.useri').val(); 
      if(icon_stat=="1") 
      { 
       $('.opaque_scr,.instruction_popup').css('visibility', 'visible'); 
       $('.instruction_popup h2').html("Add Instructions for Appointment ID: "+job_idx); 
       $('.client_name').html("<strong>Client Name: </strong>"+cl_name); 
       //get original instructions 
       var get_job="job_id="+job_idx+"&key=1"; 
       $.ajax({ 
        type:"POST", 
        url:"admin_includes/get_instructions.php", 
        data:get_job, 
        success:function(html){ 
         var split_data=html.split("^"); 
         var split_data_count=split_data.length-1; 
         var ins_tb="<table width='100%'>" 
         for(var xs=0;xs<split_data_count;xs++) 
         { 

          var ind=split_data[xs].split("|"); 
          var ind_count=ind.length-1; 
          for(var xx=0;xx<ind_count;xx++) 
          { 
           ins_tb+="<tr><td width='75%'>"+ind[0]+"</td><td>"+ind[1]+"</td></tr>"; 
          } 

         } 
         ins_tb+="</table>"; 

         $(ins_tb).appendTo('.ind_ins'); 
        } 

       })//end ajax 

       $('.add_instruction_btn').click(function(e){ 
        e.preventDefault(); 
        e.stopPropagation(); 
        var ins_content=$('#add_instructions').val(); 
        var id=$('.useri').val(); 
        if(ins_content!="") 
        { 
         //write new instructions to database 
         var id=$('.useri').val(); 
         var data="job_id="+job_idx+"&ins="+ins_content+"&client_id="+id+"&key=2"; 
         $.ajax({ 
          type:"POST", 
          url:"admin_includes/get_instructions.php", 
          data:data, 
          success:function(html2){ 
           alert(html2); 
          } 
         });//end ajax 

        } 
        return false; 
       }); 


      } 

     } 

Answer 1

的问题是，你挂钩事件处理程序不止一次。每个匹配'.bottom_links .lister a'元素被点击时，提供了各种条件合适，您重新运行该代码：

$('.add_instruction_btn').click(function(e){ 
    // .... 
}); 

每次运行该代码时，你挂钩的处理程序的新副本。

如果与'.add_instruction_btn'匹配的元素集合是固定的，那么只需将该代码从click处理程序移出'.bottom_links .lister a'元素即可。

如果该组匹配的'.add_instruction_btn'不同的元素，你还是要移动的代码click处理器之外'.bottom_links .lister a'元素，但你可能希望把它使用事件代表团，也因为你与'.bottom_links .lister a'一个做。

关于事件代表团的说明：您正在为您的活动代表团“生根”document，这真的很高。最好在最近的容器中将代表团根植到您正在观察的元素中。显然，如果document是是最近的容器，那么你就是这样，但通常情况下你可以使用更深一点的东西，但仍然可以获得委派的好处。

Answer 2

尝试e.stopPropagation：

  $('.add_instruction_btn').click(function(e){ 
       e.preventDefault(); 
       e.stopPropagation(); 
       ....