jquery-mobile - 为什么我提交表单后无法更改页面？

Question

点击提交后我应该看到：“你好”，但我没有。为什么？

http://jsfiddle.net/GbfLG/1/

<div data-role="page" id="create">
    <script type="text/javascript">
      alert("HERE");
      $('#form').submit(function() {
      $.post("/").success(function(resp) {
        alert("RET");
        $.mobile.changePage($("#final"));
      });
      return false;
      });
    </script>
    <div data-role="content">
        <form id="form">
            <input type="submit" name="g" value="Submit" id="g"/>
        </form>
    </div>
</div>

<div data-role="page" id="final">
   Hello
</div>​

Answer 1

您的表单正在提交 -return false;没有正常工作。尝试..

$('#form').submit(function(e) {
    e.preventDefault();
    e.stopPropagation();
    ... stuff ...
});

同样在您的小提琴中，您还没有定义 $.changePage 所以它显示为“未定义”。

Answer 2

jQM 有一套与普通网页不同的规则。您在错误的地方使用了您的 java 脚本。使用 jQM，如果可能的话，将所有 js 代码写入单独的文件/文件中。

这是对您的 jsFiddle 代码所做的修复，它现在正在工作，我刚刚将它放在正确的上下文中。你的 js 代码没有改变一点。

例子：

$('#create').live('pagebeforeshow',function(e,data){        
    $('#form').submit(function() {    
        $.post("/").success(function(resp) {
            $.mobile.changePage($("#final"));
        });
        return false;
    });
});