我一直遇到这个问题。这是我的第一个 phonegap 应用程序，也是我第一次使用 jQuery 和 jQuery Mobile。
我创建了一个简单的应用程序，我只想从用户那里获取“跟踪号”，然后将其提交到不同服务器上的服务器端脚本，并在同一页面上显示结果。
我尝试了很多不同的方法并不断遇到一切正常的问题，但前提是您提交一次表单(它似乎重新加载)然后再次提交。
主要.js:
var app = {
initialize: function() {
$('#tracking-form').on('submit', function(e){
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
app.searchByTracking();
return false;
});
},
searchByTracking: function() {
var formData = $("#tracking-form").serialize();
$.ajax({
type: "POST",
url: "http://newepicweb.com/bodypros/search.php",
cache: false,
data: formData,
success: function (result) {
$("#search-results").html(result);
},
error: function (request,error) {
console.log("Error " + error);
}
});
}
};
app.initialize();
搜索.html
<html>
<head>
<link rel="stylesheet" href="css/jquery.mobile-1.4.1.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="search" data-theme="b">
<div data-role="header">
<h1>Search by Tracking Number</h1>
</div><!-- /header -->
<div data-role="content" >
<h2>Instructions</h2>
<p>Click below to enter your tracking number, then press search to view the status of your vehicle.</p>
<div id="form">
<form id="tracking-form" data-ajax='false'>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="username">Tracking Number:</label>
<input type="text" name="tracking-number" id="tracking-number" value="" placeholder="Tracking Number" data-theme='a' />
</div>
<input type='submit' value='Search' />
</form>
</div>
<div id="search-results">
</div>
<p> </p>
<p><a href="menu.html" data-direction="reverse" data-role="button" data-theme="b">Back to Menu</a></p>
</div><!-- /content -->
</div><!-- /page one -->
<!-- Start of second page: #two -->
<div data-role="page" id="results" data-theme="a">
<div data-role="header">
<h1>Body Pro's</h1>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<h2>Vehicle Status</h2>
<p><a href="#search" data-role="button" data-theme="b">Search Again</a></p>
</div><!-- /content -->
</div><!-- /page two -->
<script src="lib/jquery-1.11.0.min.js"></script>
<script src="lib/jquery.mobile-1.4.1.js"></script>
<script src="lib/handlebars-v1.3.0.js"></script>
<script src="js/storage/memory-store.js"></script>
<script src="js/main.js"></script>
</body>
</html>
基本上，我试图从用户那里获取输入，使用输入获取内容，然后向用户显示输入...
任何建议或信息都会有所帮助。谢谢!
-- 另外，也许它有一些东西......
$('#tracking-form').on('submit', function(e){ } )
好像是提交了一次表单之后才注册的。我添加了 console.log() 并且它仅在我第二次按下它后才触发。
最佳答案
您正在提交整个表单。所以它正在重新加载您不想要的整个 dom。
所以你应该使用简单的按钮并使用Onclick函数。
像这样-
<input type='button' value='Search' onclick="app.searchByTracking()" />
关于javascript - Phonegap Jquery 移动表单提交刷新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21973858/