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