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

尝试在preventDefault处理程序中添加submit。

编辑：同时调用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 div <{p}}中的data-role=page指定的目标中

---编辑2 --- 我认为this example from JQueryMobile是你想要实现的目标。

Answer 2

使用jquerymobile而不是使用.on()短手时，您应该使用.submit()来绑定提交事件。查看jquerymobile事件文档。

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

jQuery-mobile＆gt;＆gt;加载带有表单提交的页面

2 个答案: