[英]Show alert when link clicked
我试图在使用 jQuery 像这样单击链接时显示警报..
$(document).ready(function() { $(".nav_link").click(function() { alert('clicked'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="navlink" id="navlink1" href="#"> Link 1 </a> <a class="navlink" id="navlink2" href="#"> Link 2 </a> <a class="navlink" id="navlink3" href="#"> Link 3 </a>
由于某种原因它不起作用,谁能发现我做错了什么?
您没有类名为nav_link
的元素。 改用navlink
:
$(document).ready(function() { $(".navlink").click(function() { alert('clicked'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="navlink" id="navlink1" href="#">Link 1</a> <a class="navlink" id="navlink2" href="#">Link 2</a> <a class="navlink" id="navlink3" href="#">Link 3</a>
尝试这个
$(document).ready(function() {
$(".navlink").click(function(e) {
e.preventDefault();
alert('clicked');
});
});
您在 jQuery 选择器中使用.nav_link
类选择器,而您的标签具有navlink
类。 您应该将其更改为navlink
,如下所示:
$(document).ready(function() { $(".navlink").click(function() { alert('clicked'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="navlink" id="navlink1" href="#"> Link 1 </a> <a class="navlink" id="navlink2" href="#"> Link 2 </a> <a class="navlink" id="navlink3" href="#"> Link 3 </a>
或者您应该将您a
标签类从navlink
为nav_link
,例如:
$(document).ready(function() { $(".nav_link").click(function() { alert('clicked'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="nav_link" id="navlink1" href="#"> Link 1 </a> <a class="nav_link" id="navlink2" href="#"> Link 2 </a> <a class="nav_link" id="navlink3" href="#"> Link 3 </a>
这是它的代码:
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> </head> <body> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <script> $(document).ready(function() { $(".navlink").click(function(){ alert("The paragraph was clicked."); }); }); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="navlink" id="navlink1" href="#"> Link 1 </a> <a class="navlink" id="navlink2" href="#"> Link 2 </a> <a class="navlink" id="navlink3" href="#"> Link 3 </a> </body> </html> <script src="" async defer></script> </body> </html>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$(".navlink").click(function(){
alert("The paragraph was clicked.");
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="navlink" id="navlink1" href="#">
Link 1
</a>
<a class="navlink" id="navlink2" href="#">
Link 2
</a>
<a class="navlink" id="navlink3" href="#">
Link 3
</a>
</body>
</html>
<script src="" async defer></script>
</body>
</html>
检查小提琴: https ://jsfiddle.net/e9Ljou4q/希望有效
您正在单击一个链接,即锚标记,每当在锚标记上调用单击事件时,它本身就有一个原生处理。 因此,为了使您的点击处理工作,您必须通过阻止点击事件的锚标记的默认行为来取消默认处理。 由于您需要阻止默认操作,因此将事件作为参数传递给 jquery click handler 的回调函数。
作为。 ('anchor-tag-class').bind('click', function(event) {
event.preventDefault();
做你的处理
});
你为什么不这样做:
$('a').click(function() {
alert('clicked');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.