jquery가 추가 된 양식 요소가 올바른 작업을 수행하지 않습니다.

이전 양식 (#modelform)을 제출 한 후에 나타나는 양식 (#waldform)이 있습니다. #modelform과 #waldform 모두 파이썬 함수를 호출합니다. #waldform을 html 파일에 직접 포함하면 모든 것이 잘 작동하고 파이썬 함수가 호출됩니다. 그러나 #modelform이 jquery를 사용하여 제출 된 후에 만 표시되도록하려면 아래 코드에서와 같이 Python 함수가 호출되지 않고 사이트 URL이 # 끝에 변경됩니다.jquery가 추가 된 양식 요소가 올바른 작업을 수행하지 않습니다.

다음은 jquery입니다. 양식 요소가 첫 번째 기능에 추가됩니다.

$(document).ready(function() { 


    //call estimate python function 
    $(function() { 

     $("#modelform").submit(function() { 

      // post the form values via AJAX... 
      $.post('/estimate', {name: $("#mymodel").val()}, function(data) { 

       var $a_var = data['title'] 
       var $element = $('<div class="item">' + $a_var + '</div><br>'); 

       $('body').append($element) ; 

       //FORM ADDED HERE 
       $('body').append('<form id="waldform" action="#" method="post"><input type="text" id="waldnum" /><input type="submit" value="Wald Test" /></form>'); 


      }); 

     return false ; 
     }); 
    }); 



    //call wald python function 
    $(function() { 

     $("#waldform").submit(function() { 

      //post the form values via AJAX... 
      $.post('/wald', {name: $("#waldnum").val()}, function(data) { 

       var $a_var = data['title'] 
       var $element = $('<div class="item">' + $a_var + '</div><br>'); 

       $('body').append($element) ; 

      }); 

     return false ; 
     }); 
    }); 



});

다음은 필요한 경우 html입니다. 이 html 코드에 #waldform을 직접 포함하면 파이썬 함수가 올바르게 호출됩니다.

<!DOCTYPE html> 
    <html> 
     <head> 

       <script type="text/javascript" src="static/jquery-1.4.2.js"></script> 
       <script type="text/javascript" src="static/jquery-ui-1.8.4.custom.min.js"></script> 
       <script type='text/javascript' src='static/js_test.js'></script> 
       <script type='text/javascript' src='static/jquery.form.js'></script> 

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
       <script src="http://malsup.github.com/jquery.form.js"></script> 
     </head> 
     <body> 

      <form id="dataform" action="submit" method="post" enctype="multipart/form-data"> 
       <input type="file" name="myfile" id="myFile"/> 
       <input type="submit" value="Submit File"/> 
      </form> 

      <form id="modelform" action="#" method="post"> 
       <input type="text" id="mymodel" /> 
       <input type="submit" value="Estimate" /> 
      </form> 

     </body> 
    </html>

출처

2013-10-24 natsuki_1996

그것을 위임 할 필요가 $'의 두 인스턴스 (함수() {})'코드에서 중복입니다. –

감사합니다 !!! 아직도 jquery 배우기 : P –

두 번째 양식이 제출되기 전에 두 번째 양식의 제출 이벤트에 바인딩됩니다. 추가 한 후에 이동하십시오.

//FORM ADDED HERE 
$('body').append('<form id="waldform" action="#" method="post"><input type="text" id="waldnum" /><input type="submit" value="Wald Test" /></form>'); 

//BIND EVENT HERE 
$("#waldform").submit(function() {

출처

2013-10-24 19:16:08

신속하게 응답 해 주셔서 감사합니다. 무슨 뜻인지 잘 모르겠다. 조금 더 구체적 일 수 있습니까? –

기본적으로,'$ ("# waldform")'을 실행하면, 그 시점에 존재하는 요소 만 선택합니다. 미래 요소는 영향을받지 않습니다. 업데이트 된 답변. –

당신은) (CSTE 연구진 사용

$(document).on('submit', '#waldform', function(e) { 
    alert('clicked'); 
    e.preventDefault(); 
});

출처

2013-10-24 19:30:06 writeToBhuwan

jquery가 추가 된 양식 요소가 올바른 작업을 수행하지 않습니다.

답변

관련 문제