Ajax 양식 제출

Question

여기에 수 백만 번을 물어 보았습니다. 몇 가지 예를 살펴 보았지만이 양식이 제출되는 이유를 알 수 없습니다. Ajax는 호출되지 않는 것처럼 보이므로 div id 문제와 같이 간단하다고 가정합니다. 나는이 30 분 동안 좌절감을 느꼈다.

JS :

$('#genform').submit(function (e) { 
    alert('hi'); 
    e.preventDefault(); 
    $.ajax({ 
     url: "month.php", 
     type: "post", 
     data: $('#form').serialize(), 
     success: function (msg) { 
      $("#info").html(msg); 
     } 
    }); 
}); 

HTML :

<!-- trigger button --> 
<div class="col-md-4"> 
<a href="#" id="toggle" class="btn btn-default dropdown-toggle btn-sm"> Bulk PDF Export <span class="caret"></span></a> 
</div> 
<!--- popup form div --> 
<div id="gendiv" style="display:none;"> 
    <form id="genform"> 
     <div class="form-input"> 
      <select name="month"> 
       <option value="2013-09-01">September 2013</option> 
       <option value="2013-08-01">August 2013</option> 
       <option value="2013-07-01">July 2013</option> 
      </select> 
     </div> 
     <div class="form-input"><i class="icon-ellipsis-horizontal"></i> PGY-1 <span class="pull-right"><input type="checkbox" id="pgy1" checked name="pgy[1]"></span> 
     </div> 
     <div class="form-input"><i class="icon-ellipsis-horizontal"></i> PGY-2 <span class="pull-right"><input type="checkbox" id="pgy2" checked name="pgy[2]"></span> 
     </div> 
     <div class="form-input"><i class="icon-ellipsis-horizontal"></i> PGY-3 <span class="pull-right"><input type="checkbox" id="pgy3" checked name="pgy[3]"></span> 
     </div> 
     <div class="form-input" style="text-align:center"> 
      <button type="submit" class="btn btn-primary btn-xs">Generate</button> 
     </div> 
     <div id="info"></div> 
    </form> 
</div> 

바이올린 : http://jsfiddle.net/KQ2nM/2/

Answer 1

이유는 그것이 작동하지 않는 이유는 popover가 양식을 복제 한 다음 html을 클래스 .popover-content과 함께 배치하기 때문입니다.

이는 바인딩 이벤트는 숨겨진 #gendiv 내부에있는 원래#genform에 연결되어 있음을 의미한다.

사용이 대신 : 이것은 jQuery의 .on() 기능을 사용하고 submit 이벤트가 ID #genform와 양식에 트리거를 위해 기본적으로 지켜 보는 document에 이벤트 핸들러를 첨부

$(document).on('submit', '#genform', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     url: "month.php", 
     type: "post", 
     data: $(this).serialize(), 
     success: function (msg) { 
      $("#info").html(msg); 
     } 
    }); 
}); 

. 이벤트 핸들러를 대상 요소에 직접 연결하는 대신 document에 연결하면 이벤트가 바인딩 될 때 ID가 #genform 인 양식이 있는지 여부에 관계없이 submit 이벤트에 의해 트리거됩니다.

여기가 작동 중입니다. http://jsfiddle.net/KQ2nM/4/

Answer 2

당신이 누락 된 일부 닫는 태그 :

<div class="form-input"> 
    <i class="icon-ellipsis-horizontal"></i> PGY-1 <span class="pull-right"> 
     <input type="checkbox" id="pgy1" checked name="pgy[1]"> </input> <--- here 
    </span> 
</div> 

그리고 양식 방법 (그렇지 않으면를;)
Here의 새로운 바이올린

<form id="genform" method="POST"> 

는 이제 CSRF 토큰에 대해 불평 장고,하지만 당신의 물건 : 오류)를 뱉어.

편집 : 사용자 지정 처리기를 호출하지 않고 제출 한 이후로 잘못 처리 한 것 같습니다. Joe가 수정했습니다. 하지만 여전히 입력을 닫아야합니다.