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将收到的响应插入由pageContainer指定的目标中，该目标包装在带有data-role=page的div

---编辑2 ---我认为您要尝试实现JQueryMobile的示例 。

Answer 2

使用.on()应使用.on()绑定提交事件，而不要使用.submit()简写形式。 查看jquerymobile事件文档。

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