时间戳

首页 > 解决方案 > jQuery按钮不会在点击时触发

jquery - jQuery按钮不会在点击时触发

问题描述

我是 Web 开发的新手，我正在尝试让我的按钮工作。这是我的 index.html：

<!-- meta tags -->
<meta charset="utf-8"
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- bootstrap css and jQuery cdn -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"</script>

<script>
    $("#btn-login").on("click", function(e) {
        e.preventDefault();
        alert("works");
    });
</script>

</head>

<body>
    <button id="btn-login" class="btn btn-primary" type="button">Login</button>
</body>

我似乎无法缩小问题的范围，我已经尝试了一切。我只是想让按钮在单击时触发警报。我看过很多教程和一堆其他论坛，但他们的修复都没有奏效。我试图将双引号更改为单引号。我试图在 btn-login 之前删除 #。谁能帮我吗？我确信这是一个我忽略的简单修复。

如果有帮助，我将通过 Microsoft 的 CDN 和 Bootstrap3 使用 jQuery 作为样式表。我也在运行socket.io。

标签： jqueryhtml

解决方案

您没有关闭标签，也没有等待文档准备好。尝试这个：

<!-- meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- bootstrap css and jQuery cdn -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

<script>
   $(document).ready(function(){
     $("#btn-login").on("click", function(e) {
        e.preventDefault();
        alert("works");
    });
});

</script>

</head>

<body>
    <button id="btn-login" class="btn btn-primary" type="button">Login</button>
</body>

试试看：https ://torndualpublishing--parzibyte.repl.co/

推荐阅读