jQuery-mobile >> 양식 제출 페이지로드

Question

이것은 간단한 작업이어야합니다. 양식을 제출하고 "#responsediv"div에 결과를 표시하고 싶지만 모든 작업을 시도해도 전체 페이지가 다시로드됩니다.

저는 jquery-mobile을 (를) 처음 사용했습니다. 누군가 도와 주실 수 있습니까? 미리 감사드립니다. :-)

<div data-role="page" id="page1" data-theme="a"> 
    <div data-role="content" id="content1" name="content1"> 
    <form id="form1" > 
     <div id="text1" data-role="fieldcontain"> 
     <label for="text1">Text1:</label> 
     <input id="text1" name="text1" type="text" /> 
     </div> 
     <div id="text2" data-role="fieldcontain"> 
     <label for="text2">Text2:</label> 
     <input id="text2" name="text2" type="text" /> 
     </div> 
     <div id="submitDiv" data-role="fieldcontain"> 
     <button name="submitbtn" type="submit" id="submitbtn" />submit</button> 
     </div> 
    </form> 
    <div id="responsediv"></div> 
    </div> 
    </div> 
</div> 

<script> 
    $('#form1').submit(function() { 
     $.mobile.loadPage("response.php",{ 
      type: "post", 
      data: $("#form1").serialize(), 
      pageContainer: $("#responsediv") 
      }); 
    }); 
    </script> 

---

여전히 작동하지 않는,하지만 여기 내 최신 시도는 다음과 같습니다

$('#form1').on("submit", function(e){ 
       e.preventDefault(); 
       $.mobile.loadPage("result.php",{ 
        type: "post", 
        data: $("#form1").serialize(), 
        pageContainer: $("#responsediv") 
        }); 
     return false; 
}); 

Answer 1

시도는 submit 핸들러 내에서 preventDefault를 추가.

편집 : perventDefault과 stopPropogation을 모두 호출하는 것은 예상대로 작동하는 것 같습니다.

$('#form1').submit(function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    $.mobile.loadPage("/echo/html",{ 
     type: "post", 
     data: $("#form1").serialize(), 
     pageContainer: $("#responsediv") 
    }); 
}); 

이 샘플은 jsfiddle을 참조하십시오. JQueryMobile loadPage 응답을 삽입하는 것이

참고 data-role=page

--- 편집 2 ---와 div에 싸여 pageContainer에 의해 지정된 목표로받은 나는 this example from JQueryMobile 당신이 달성하려고하는 것입니다 생각합니다.

Answer 2

짧은 핸드를 .submit() 대신 사용하는 경우 jquerymobile을 사용할 때 .on()을 사용하여 전송 이벤트를 바인딩해야합니다. jquerymobile 이벤트 문서를 확인하십시오.

$('#form1').on('submit',function(e) { 
       e.preventDefault(); 
       $.mobile.loadPage("response.php",{ 
        type: "post", 
        data: $("#form1").serialize(), 
        pageContainer: $("#responsediv") 
        });  
     });