Question

我正在使用phonegap开发移动应用程序并尝试使用jquery集成表单以将数据发布到sql数据库，但表单似乎以一种奇怪的方式运行。如果我将应用程序设置为在启动应用程序时直接导航到表单页面，它可以正常工作但如果我尝试从不同的初始页面导航到表单页面，表单将拒绝工作。问题似乎是在第一个初始页面上声明jquery移动脚本。

如果有人知道发生什么事情会很棒，因为我无法弄明白这一点！

包含链接的页面的HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>     
<title>jQuery form post</title> 
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />

</head>
<body>
<div data-role="page" class="ui-responsive-panel" >
<div data-role="header" >
    <h1>New Submission</h1>
</div>      

<div data-role="content">

<a href="comment_2.html" data-role = "button">New Submission</a>

</div>

</body>
</html>

带有表单的页面的HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>     
<title>jQuery form post</title>   
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="js/post.js"></script> 

</head>
<body>
<div data-role="page" class="ui-responsive-panel" >
<div data-role="header" >
    <h1>New Submission</h1>
</div>      

<div data-role="content">

<div id="landmark-1" data-landmark-id="1">
<form id="comment">
    <label for="email">
        <b>Email</b>
        <input type="email" id="email" name="email">
    </label>

    <label for="comment">
        <b>Comment</b>
        <textarea id="comment" name="comment" cols="30" rows="10"></textarea>
    </label>

    <input type="submit" value="Save">
</form>
</div>

</div>

</body>
</html>

Answer 1

只需在comment.html页面标题部分添加：

<script src="js/post.js"></script>

应该有用吗？！或者我错过了什么？

Answer 2

jQuery mobile甚至不包括你的post.js，当它不是第一页时。这是它的工作原理，加载第一页上的所有内容，之后它将通过AJAX注入data-role =“page”。记录此行为here。

要解决此问题，您有两种选择：

使用其中一个page change events执行代码。
将您的代码移到data-role =“page”div。

jQuery移动奇怪的表单行为

2 个答案: