Javascript 提交表单时如何调用方法？_Javascript_Jquery

Javascript 提交表单时如何调用方法？

javascript jquery

Javascript 提交表单时如何调用方法？,javascript,jquery,Javascript,Jquery,我的目标是在表单中按下submit按钮时调用方法onClickLogin。但是只调用方法initialize（对于loginPageController）。当每个方法都在app对象中时，但当我添加loginPageController脚本已停止正常工作时，此代码工作正常。我该如何解决这个问题我有以下HTML代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

我的目标是在表单中按下submit按钮时调用方法

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>

查看此工作小提琴：

1:jQuery Mobile需要首先初始化自身。您的代码没有按正确的顺序运行。它需要在jQuery和jQueryMobile完成各自的初始化之后运行。在调用初始化之前，需要加载整个页面

这就是纯jQuery所需的全部内容：

$( document ).ready( function() {
    app.initialize();
});

使用jQuery Mobile时，这也适用于您：

$( document ).on( "pagebeforeshow", function() {
    app.initialize();
});

记住这些事件：

特别是：

2：绑定到按钮本身，然后返回

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
    }
};

看看这把工作小提琴：

没有动作，没关系。当所有方法都在

app

object中时，脚本可以正常工作。您是对的@user3106462，但正如我在回答中所示，您需要首先让jQuery和jQuery Mobile完全初始化它们自己。我为你准备了一把小提琴，展示了它的工作原理？在我的浏览器中，我仍然可以看到，当我单击登录按钮时，调用方法

initialize

（对于

loginPageController

）。

var loginPageController = {
    initialize: function() {
        console.log("loginPageController.initialize");
        $("[name='login-submit']").on("click", this.onClickLogin);
    },
    onClickLogin: function() {
        console.log("loginPageController.onClickLogin");
        return false
    }
};