매번 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

문제는 당신이 한 번 이상 이벤트 핸들러 더 접선하고 있다는 점이다.

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

당신이 그 코드를 실행할 때마다, 당신은 핸들러의 새 복사본을 훅 : '.bottom_links .lister a' 일치하는 요소를 클릭 할 때마다, 다양한 조건이 맞다 제공, 당신은이 코드를 다시 실행.

'.add_instruction_btn'과 일치하는 요소 집합이 수정 된 경우 해당 코드를 '.bottom_links .lister a' 요소의 click 처리기 밖으로 이동하기 만하면됩니다.

'.add_instruction_btn'이 다릅니다 일치하는 요소의 세트, 당신은 여전히 ​​'.bottom_links .lister a' 요소의 click 핸들러 외부 코드를 이동하려면

,하지만 당신은 아마 당신이 '.bottom_links .lister a' 하나와 마찬가지로이 역시 이벤트 위임을 사용하도록합니다.

이벤트 위임에 대한 참고 사항 : 이벤트 위임을 document에 "뿌리 내고 있습니다."이는 실제로 정말 최고입니다. 보고있는 요소에 가장 가까운 컨테이너에서 위임을 루트하는 것이 가장 좋습니다. 분명히 document이 인 경우 분명 가장 가까운 컨테이너이지만, 대개 위임의 이점을 얻으면서 대개 다음 단계로 사용할 수 있습니다.

Answer 2

e.stopPropagation을 시도해보십시오

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