JQuery와 피할 여러 요청이

Question

내가 여러 제출하기를 방지 할 수있는 방법을 필요로 preventDefault :

$("#myDiv").click(function(e) { 
    e.preventDefault(); 
    console.log('open'); 

    // submit the form  
    $('#myDiv #myInput').click(function(e){ 
     e.preventDefault(); 
     /* ajax call here */ 
     console.log('clicked'); 
    }); 

}); 

그래서 #myDiv는 X 시간이 자식 함수로 클릭 보내는 클릭하면 경우.

예 : #myDiv을 3 번 클릭 한 다음 #myInput을 클릭하면 3 번 양식을 보내고 다시 누르면 6을 보냅니다.

문제를 해결하는 방법에 대한 아이디어가 있으십니까? 당신이

당신은 $("#myDiv").click(function(e) {의 클릭 핸들러 외부 $('#myDiv #myInput').click(function(e){을 이동하거나 .one(를 사용해야 하나 .. $('#myDiv #myInput')에 대한 클릭 이벤트 처리기를 여러 번 바인딩처럼

Answer 1

보인다. 두 경우 모두 동작이 다릅니다.

또한 이벤트 버블 링을 중지하려면 event.stopPropagation();을 사용해야합니다.

요구 사항에 따라 아래 코드를 시도하십시오. 아래 항목 1.과 2.는 다르게 작동하므로 코드를 이해하고 요구 사항에 따라 구현하십시오.

1. #myInput의 클릭 핸들러가 한 번 실행됩니다 있습니다

   $("#myDiv").click(function(e) { 
   e.preventDefault(); 
   e.stopPropagation(); 
   console.log('open'); 
   }); 
   
   // submit the form  
   $('#myDiv #myInput').click(function(e){ 
       e.preventDefault(); 
       e.stopPropagation(); 
       /* ajax call here */ 
       console.log('clicked'); 
   }); 
   

2. 외부 이벤트를 클릭 #myInput 이동.

   $("#myDiv").click(function(e) { 
       e.preventDefault(); 
       e.stopPropagation(); 
       console.log('open'); 
   
       // submit the form  
       $('#myDiv #myInput').one(function(e){ 
       e.preventDefault(); 
       e.stopPropagation(); 
       /* ajax call here */ 
       console.log('clicked'); 
       }); 
   });