我的目标是在按下表单中的提交按钮时调用方法onClickLogin。但只调用方法initialize（对于loginPageController）。当每个方法都在app对象中时，此代码工作正常，但是当我添加loginPageController脚本时，脚本已停止正常工作。我该如何解决这个问题？
我有这个HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="css/jquery.mobile-1.4.0.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.mobile-1.4.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/index.js"></script>
<title>Example</title>
</head>
<body>
<!-- Start of login page -->
<div data-role="page" id="login-page">
<!-- Start of page header -->
<div data-role="header" style="overflow: hidden;">
<h1>Login</h1>
</div>
<!-- /header -->
<!-- Start of page content -->
<div role="main" class="ui-content">
<form id="login-form">
<label for="login-username" class="ui-hidden-accessible">User Name</label>
<input name="login-username" id="login-username" placeholder="User Name" value="" type="text">
<label for="login-password" class="ui-hidden-accessible">Password</label>
<input name="login-password" id="login-password" placeholder="Password" value="" type="password">
<div class="ui-grid-a">
<div class="ui-block-a"></div>
<div class="ui-block-b">
<button type="submit" name="login-submit" value="login-submit">Login</button>
</div>
</div>
</form>
</div>
<!-- /content -->
</div>
<!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<!-- Start of page content -->
<div role="main" class="ui-content">
<p>I'm the second in the source order so I'm hidden when the page
loads. I'm just shown if a link that references my id is beeing
clicked.</p>
<p>
<a href="#foo">Back to foo</a>
</p>
</div>
<!-- /content -->
</div>
<!-- /page -->
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
我有这个JavaScript：
var app = {
initialize: function() {
console.log("app.initialize");
this.bindEvents();
},
bindEvents: function() {
console.log("app.bindEvents");
$(document).on("pageinit", "#login-page", loginPageController.initialize);
}
};
var loginPageController = {
initialize: function() {
console.log("loginPageController.initialize");
$("#login-form").on("submit", this.onClickLogin);
},
onClickLogin: function() {
console.log("loginPageController.onClickLogin");
}
};
答案 0 :(得分：0)
看到这个工作小提琴： http://jsfiddle.net/THWZU/7/
您的代码未按正确顺序运行。它需要在 jQuery之后运行，jQuery Mobile会自己进行初始化。在调用初始化之前，需要加载整个页面。
对于纯jQuery，这就是你所需要的：
$( document ).ready( function() {
app.initialize();
});
这也适用于jQuery Mobile：
$( document ).on( "pagebeforeshow", function() {
app.initialize();
});
牢记这些事件： http://api.jquerymobile.com/category/events/
特别是这些：
false。新loginPageController代码：
var loginPageController = {
initialize: function() {
console.log("loginPageController.initialize");
$("[name='login-submit']").on("click", this.onClickLogin);
},
onClickLogin: function() {
console.log("loginPageController.onClickLogin");
return false
}
};
看到这个工作小提琴： http://jsfiddle.net/THWZU/7/