jquery colorbox form submit 이벤트가 트리거되지 않았습니다.

Question

id가 "yearbookorder"인 div가 있는데 숨겨져 있습니다. 클릭 이벤트 후 해당 yearbookorder ID DIV와 함께 colorbox가 나타납니다. 이 사업부에서

, 여기에 코드입니다 : 내가 제출 JQuery와 아약스 코드가

<form id="yearbook_order" name="yearbook_order" action="yearbook/order" enctype="multipart/form-data" method="post"> 
    <input class="ordering" name="yb_email" value="" > 
    <input type="submit" id="order" name="order" value="Send it!"> 
</form> 

하지만, 양식 제출 이벤트가 트리거되지 않습니다

$(function() 
    { 
     $("#yearbook_order").submit(function(e){ 
     e.preventDefault(); 
     dataString = $("#yearbook_order").serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "yearbook/order", 
      data: dataString, 
      dataType: "json", 
      success: function(data) 
      { 
       if (data.status == 'error') 
       { 
        alert(data.message); 
        //$("#msg").html(data.message); 
       } 
       else 
       { 
        //$("#msg").html(data.message); 
        alert(data.message); 
       } 
      } 
      });    
     }); 
    }); 

내가 클릭하면 제출 버튼을 클릭하면 양식이 제출되지 않습니다. 하지만 왜? 컬러 박스가 아닌 빈 페이지에서이 양식을 호출하면 작동합니다. 숨겨진 yearbookorder DIV에 문제가 있습니까?

Answer 1

You are binding submit to the form before it exists. Bind the event to the document, and pass the form selector to .on: 

$(document).on("submit", "#yearbook_order", function(e){ 
    // make ajax request here 
});