버튼 클릭 이벤트 내에서 Ajax 페이지 새로 고침을 방지하는 방법은 무엇입니까?

Question

개요 :

JQuery 버튼 클릭 이벤트 내에 Ajax POST 메소드를 설정했습니다. 이 구현은 정상적으로 작동했으며 evt.preventDefault();을 지정하여 페이지를 새로 고치지 않았습니다. 하지만 지금 버튼을 클릭 이벤트 내에서 양식 제출 $createForm.submit();에 대한 호출을 추가했습니다. (아약스를 통해 제출하기 전에 페이지에서 유효성 검사를 트리거하기 위해.)

문제 :

이 호출을 추가하는 문제는 페이지가 확인되고 난 제출 버튼을 클릭하면 페이지가 지금 다시 새로 고치는 것입니다.

나는이 문제에 대한 검색을 수행하고 버튼 클릭 이벤트 as suggested here 끝 부분에 return false;을 추가해도 페이지 새로 고침이 방지되지 않습니다.

질문 : 버튼 클릭 이벤트 내에서 Ajax 페이지 새로 고침을 방지하려면 어떻게합니까? 드롭 다운 버튼에 포함 된 버튼에 대한

HTML을 :

           <div class="btn-group dropup"> 
                <button type="submit" class="btn btn-success dropdown-toggle" style="background-color: #0CA281;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                 SUBMIT <span class="caret"></span> 
                </button> 
                <ul class="dropdown-menu"> 
                 <li id="submitAndEmailBtn"><a>Submit + Email</a></li> 
                 <li role="separator" class="divider"></li> 
                 <li id="submitBtn"><a>Submit Only</a></li> 
                </ul> 
               </div> 

submitAndEmailBtn 클릭 이벤트 내에서 Ajax 호출 :

//Ajax POST method fired on submitAndEmailBtn li button click 
    $('#submitAndEmailBtn').click(function(evt) 
    { 
     //call to prevent default refresh 
     evt.preventDefault(); 

     //call submit on the form to run validation 
     //before running the Ajax call. 
     $createForm.submit(); 

     //swal dialog to confirm or cancel Ajax call 
     swal({ 
      title: "Submit & Email", 
      text: "Are you sure?", 
      type: "warning", 
      showCancelButton: true, 
      closeOnConfirm: false, 
      showLoaderOnConfirm: true, 
     }, function() { 
      $.ajax({ 
       url: "@(Url.Action("EmailAndSubmit", "CreateEsc"))", 
       type: 'POST', 
      traditional: true, 
      data: $("#createForm").serialize(), 
      dataType: "json", 
      success: function (result) { 
       if (result.Success) { 
        swal("Emailed and Submitted!"); 
        window.location.href = result.redirectUrl; 
       } 
       else { 
        $('#submitStatus').text("Error occurred while processing your request"); 
        $(this).addClass('alert alert-danger fade in'); 
        $('#submitStatus').show(); 

       } 
      }, 
      //catches any HTTP error after AJAX method return 
      error: function (jqXHR, exception) { 
       var msg = ''; 
       if (jqXHR.status === 0) { 
        msg = 'Not connect.\n Verify Network.'; 
       } else if (jqXHR.status == 404) { 
        msg = 'Requested page not found. [404]'; 
       } else if (jqXHR.status == 500) { 
        msg = 'Internal Server Error [500].'; 
       } else if (exception === 'parsererror') { 
        msg = 'Requested JSON parse failed.'; 
       } else if (exception === 'timeout') { 
        msg = 'Time out error.'; 
       } else if (exception === 'abort') { 
        msg = 'Ajax request aborted.'; 
       } else { 
        msg = 'Uncaught Error.\n' + jqXHR.responseText; 
       } 
       $('#submitStatus').text("Error occurred while processing your request. Detail: " + msg); 
       $(this).addClass('alert alert-danger fade in'); 
       $('#submitStatus').show(); 
      }, 
      }); 
     }); 

     return false; 

    }); 

Answer 1

$ myForm을 함께 $ myForm.submit()를 교체하십시오 .find (': submit'). 클릭()

주어진 경우 @Abraham on this thread