无法从JQuery获得点击

艾伦·L

我终于进入了构建网页的阶段,并且陷入了困境。我浏览了无数页,试图了解我在做什么错,但没有任何帮助。因此,我转向你。我确定我正在做一些脑筋急转弯的事,但无法追踪。

我已经建立了一个简单的登录屏幕,并且试图获取“提交”按钮来触发点击事件并显示我的成功模式。但是,当我单击提交时,没有任何反应。Chrome的控制台(Dev Tools)上也没有显示任何内容。我在JQuery和Bootstrap组件中遇到3个错误,但它们没有任何意义。

*jquery-1.11.2.min.js:1 Uncaught SyntaxError: Unexpected token :*
*bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery
at bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6
jquery-1.11.2.min.js:1 Uncaught SyntaxError: Unexpected token :*

我的login.html代码

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <meta content="en-us" http-equiv="Content-Language" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Login</title>
</head>

<body style="padding-top:20px">
    <div class="col-md-10 col-md-offset-1">
        <div class="well">
            <table class="table table-bordered">
                <thead>
                    <tr class="success">
                        <td colspan="2">Login</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Username</td>
                        <td>
                             <input type="text" id="txtLogin"     placeholder="Username" />
                        </td>
                    </tr>
                    <tr>
                        <td>Password</td>
                        <td>
                             <input type="password" id="txtPassword"     placeholder="Password" />
                        </td>
                    </tr>
                    <tr class="success">
                        <td colspan="2">
                            <input id="btnSubmit" class="btn btn-success"     type="button" value="Submit" />
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="modal fade" tabindex="-1" id="successModal" data-    keyboard="false" data-backdrop="static">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">
                                &times;
                            </button>
                            <h4>Success</h4>
                        </div>
                        <div class="modal-body">
                            <h2>Login Successful</h2>
                        </div>
                        <div class="modal-footer">
                            <button type="button" data-dismiss="modal" class="btn btn-success">
                                Close
                            </button>
                        </div>
                    </div>
                </div>
                            <button type="button" data-dismiss="modal" class="btn btn-success">
                                Close
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="divError" class="alert alert-danger collapse">
                <a id="linkClose" class="close" href="#">&times;</a>
                <div id="divErrorText"></div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#linkClose').click(function () {
                $('#divError').hide('fade');
            });
            $('#btnSubmit').click(function () {
                $('#successModal').modal('show');
            });
        });
    </script>

</body>
</html>
快乐的人

您的jQuery无法正确加载文件,请重新下载或使用此示例有效的CDN版本

$(document).ready(function () {
            $('#linkClose').click(function () {
                $('#divError').hide('fade');
            });
            $('#btnSubmit').click(function () {
                $('#successModal').modal('show');
            });
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body style="padding-top:20px">
    <div class="col-md-10 col-md-offset-1">
        <div class="well">
            <table class="table table-bordered">
                <thead>
                    <tr class="success">
                        <td colspan="2">Login</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Username</td>
                        <td>
                             <input type="text" id="txtLogin"     placeholder="Username" />
                        </td>
                    </tr>
                    <tr>
                        <td>Password</td>
                        <td>
                             <input type="password" id="txtPassword"     placeholder="Password" />
                        </td>
                    </tr>
                    <tr class="success">
                        <td colspan="2">
                            <input id="btnSubmit" class="btn btn-success"     type="button" value="Submit" />
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="modal fade" tabindex="-1" id="successModal" data-    keyboard="false" data-backdrop="static">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">
                                &times;
                            </button>
                            <h4>Success</h4>
                        </div>
                        <div class="modal-body">
                            <h2>Login Successful</h2>
                        </div>
                        <div class="modal-footer">
                            <button type="button" data-dismiss="modal" class="btn btn-success">
                                Close
                            </button>
                        </div>
                    </div>
                </div>
                            <button type="button" data-dismiss="modal" class="btn btn-success">
                                Close
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="divError" class="alert alert-danger collapse">
                <a id="linkClose" class="close" href="#">&times;</a>
                <div id="divErrorText"></div>
            </div>
        </div>
    </div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在Pygame中无法获得点击精灵

来自分类Dev

无法获得点击按钮的索引

来自分类Dev

无法从日历获得点击(日期日期)信号

来自分类Dev

无法获得点击的幻灯片的正确索引

来自分类Dev

无法从日历获得点击(日期日期)信号

来自分类Dev

为什么我无法获得点击元素属性?

来自分类Dev

jQuery 在 jinja2 循环中获得点击值

来自分类Dev

OxyPlot获得点击点

来自分类Dev

如何获得点击次数

来自分类Dev

MeteorJS:如何获得点击的元素

来自分类Dev

Javascript获得点击子索引

来自分类Dev

引导选择-单击获得点击值

来自分类Dev

如何获得点击事件的关键

来自分类Dev

角在文本中获得点击的单词

来自分类Dev

如何获得点击目标的hasClass?

来自分类Dev

我如何获得点击事件

来自分类Dev

快速获得点击的图像视图

来自分类Dev

如何获得点击元素的索引?

来自分类Dev

如何获得点击按钮的价值?

来自分类Dev

Vala图片点击事件。如何获得点击的协调?

来自分类Dev

Vala图片点击事件。如何获得点击的协调?

来自分类Dev

无法获得点积C编程的结果

来自分类Dev

如何获得点击数据属性值?

来自分类Dev

木偶事件单击。如何获得点击项的属性?

来自分类Dev

如何获得点击应用程序的输出(stdout / stderr)?

来自分类Dev

Highcharts-如何获得点击事件的最近点

来自分类Dev

贝宝智能按钮:获得点击按钮

来自分类Dev

我可以在文本视图上获得点击位置吗?

来自分类Dev

如何在JavaScript中获得点击的li值?