Ajax는 부트 스트랩 모달에서 onclick 이벤트를 여러 번 호출합니다.

Question

버튼을 클릭하면 부트 스트랩 모달이로드됩니다. 모달에는 양식이 있고 저장 단추를 클릭하면 아약스 호출로 양식을 제출하려고합니다. 처음에는 아약스 호출이 한 번만 트리거되지만 두 번째로는 아약스 URL이 두 번 트리거됩니다. 나는 방화 광 콘솔 섹션에서 게시 URL이 여러 번 호출된다는 것을 안다.

여기 내 jquery 코드입니다.

$(".show-modal").click(function() { 
        $('.upload-modal').modal(); 

        $(".save-logo").click(function(e) { 

         e.preventDefault(); 
         $.ajax({ 
           type : "POST", 
           data : data,       
           contentType: false, 
           cache : false, 
           processData: false, 
           url : "../../io/upload/" 
         }).done(function(rawData) { 
          $('.modal-header .close').click(); 

         }) 

        }); 
      }) 

Answer 1

문제는 .shave-modal 클릭 핸들러 내에 .save-logo 클릭 핸들러가 있다는 것입니다. 따라서 모달이 표시 될 때마다 다른 클릭 핸들러를 .save-logo 요소에 첨부합니다. 아래 코드는 문제를 해결합니다.

$(".show-modal").click(function() { 
    $('.upload-modal').modal(); 
}); 

$(".save-logo").click(function (e) { 

    e.preventDefault(); 
    $.ajax({ 
     type: "POST", 
     data: data, 
     contentType: false, 
     cache: false, 
     processData: false, 
     url: "../../io/upload/" 
    }).done(function (rawData) { 
     $('.modal-header .close').click(); 

    }) 

});