submitHandler가 외부 js와 작동하지 않습니다

Question

변경 사항이 저장되지 않은 시나리오를 JSP로 처리해야합니다. 하나의 JSP 폼 & 두 개의 외부 js 파일이 있습니다.

1) 양식 내에서 저장 버튼을 클릭하면 정상적으로 작동합니다.
2) alert.js 코드가 JSP의 일부로 인라인 스크립트 인 경우 제대로 작동합니다.
3) alert.js를 외부화하고이 js를 가져 오기의 일부로 포함하면 app.js의 submit_form() 함수에 들어갑니다. 그러나 submitHandler는 실행되지 않았습니다.

1)의 JSP 형태

I have form with inline js click event like below 

    //submit form with validation 
    $('button:submit').click(function() { 
     submit_form('#name', '#siteId', '${add}', '${view}', 'Site'); 
    }); 


    <form:form id="form" action="${save}" commandName="site" cssClass="form-horizontal" data-toggle="validator"> 
     . 
     . 
     . 
     . 
     <button type="submit" class="btn btn-primary" disabled><spring:message code="form.button.site.save"/></button> 
    </form:form> 

app.js

function submit_form(name, page_id, $add_url, $view_url, page_name) { 
    $form.validate({ 
     . 
     . 
     submitHandler: function(form) { 
      . 
      . 
      $.post($form.attr('action'), $form.serialize(), function(response) { 
      }); 
     } 
    }); 

alert.js

$(document).ready(function() { 
    //unsaved alert section 
    var unsaved = false; 

    $(document).on('change', ':input', ':select', function() { //triggers change in all input/select fields including text type 
     unsaved = true; 
    }); 

    $('a.form-done').click(function() { 
     var $this = $(this); 
     if(unsaved === true) { 
      var $modal = $('#unsaveModal'); 
      $modal.find(".modal-title").text("Unsaved Changes"); 
      $modal.find(".modal-body span").html("Changes have not been saved. Do you want to save changes?"); 
      $modal.find('.modal-footer .btn-warning').attr('href', $this.attr('href')); 
      $modal.modal('show'); 
      return false; 
     } else { 
      return; 
     } 
    }); 

    $('button:submit').click(function() { 
     unsaved = false; 
    }); 

    $('#unsaveModal .modal-footer .btn-primary').click(function() { 
     $('button:submit').prop('disabled', true); 
     $('#form').submit(); 
      $('#unsaveModal').modal('hide'); 
     }); 
    }); 

Answer 1

function submit_form(name, page_id, $add_url, $view_url, page_name) { 
    $form.validate({ 
     .... 
     submitHandler: function(form) { 
      .... 
     } 
    }); 
    .... 

.validate() 방법은 이 양식에 플러그인을 초기화하고 click 핸들러 내부에 배치해서는 안되며 결코 submit 핸들러 내부 하는 데 사용됩니다. 플러그인은 이미 click을 캡처하고 submit 이벤트를 방해하고 있습니다. submit 핸들러 안에 넣으면 플러그인 초기화가 호출되기 전에 제출이 이미 발생 했으므로 중단됩니다.

$(document).ready(function() { 

    $form.validate({ 
     .... 
     submitHandler: function(form) { 
      // ajax here 
      .... 
     } 
    }); 
    ....