Question

我是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登录前的＃。谁能帮我吗？我确信这是我所忽略的简单修复。

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

Answer 1

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

<!-- 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/

Answer 2

这里的问题是脚本的位置。因此，HTML页面是从上到下逐行呈现的。因此，到目前为止，您的脚本标签位于头部。因此，当浏览器到达此行并尝试将点击事件绑定到ID为“ btn-login”的按钮时。但是实际上该按钮当时不存在，因为浏览器尚未读取该按钮标签，因此仍要加载。

如果将script标签放置在body end标签（）之前。由于到那时该按钮将被加载，而click事件处理程序将被附加到该按钮，因此它将像一个超级按钮一样起作用。

jQuery按钮不会在点击时触发

2 个答案: