jQuery按钮不会在单击时触发
jQuery按钮不会在单击时触发
提问于 2019-03-06 01:58:34
我是网站开发的新手，我正在尝试让我的按钮工作。这是我的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之前删除#。有人能帮我吗？我确信这是我忽略的一个简单的修复方法。
如果有帮助，我通过微软的CDN和Bootstrap3使用jQuery作为样式表。我也在运行socket.io。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-03-06 02:01:26
您没有关闭标记，也没有等待文档就绪。试试这个：
<!-- 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>Stack Overflow用户
发布于 2019-03-06 02:04:36
这里的问题是脚本的位置。因此，HTML页面是从上到下逐行呈现的。因此，到目前为止，您的脚本标记位于head部分。因此，当浏览器到达此行并尝试将单击事件绑定到id为'btn-login‘的按钮时。但实际上该按钮在那个时刻并不存在，因为该按钮标签还没有被浏览器读取，它仍然需要加载。
如果将脚本标记放在正文结束标记()之前。它的工作方式就像一个护身符，因为到那时按钮将被加载，并且click事件处理程序将附加到按钮。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55008896
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号