0

这应该是一个简单的任务。我想提交一个表单并将结果显示在“#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;
});
4

2 回答 2

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。

请注意，JQueryMobileloadPage将接收到的响应插入到由pageContainer包装在divwith中指定的目标中data-role=page

--- 编辑 2 --- 我认为JQueryMobile 的这个例子是你想要实现的。

于 2012-07-19T09:37:35.267 回答
0

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

$('#form1').on('submit',function(e) {
                e.preventDefault();
                $.mobile.loadPage("response.php",{
                    type: "post",
                    data: $("#form1").serialize(),
                    pageContainer: $("#responsediv")
                  });       
        });
于 2012-07-19T09:38:41.150 回答