单击链接时显示警报
[英]Show alert when link clicked
问题描述
I am trying to show an alert when a link is clicked using jQuery like this..
我试图在使用 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>
It isn't working for some reason, can anyone spot what I am doing wrong?由于某种原因它不起作用，谁能发现我做错了什么？
6 个解决方案
解决方案1
1 2018-05-27 12:08:25
You don't have element with class name of nav_link .您没有类名为nav_link的元素。 Use navlink instead:改用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>
解决方案2
0 2018-05-27 12:09:29
try this尝试这个
$(document).ready(function() {
$(".navlink").click(function(e) {
e.preventDefault();
alert('clicked');
});
});
解决方案3
0 2018-05-27 12:13:47
You are using .nav_link class selector in your jQuery selector while your tags have navlink class.您在 jQuery 选择器中使用.nav_link类选择器，而您的标签具有navlink类。 you should change it to navlink like the following :您应该将其更改为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>
OR you should change your a tags classes from navlink to nav_link like :或者您应该将您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>
解决方案4
0 2018-05-27 12:15:36
here is the code for it:这是它的代码：
<!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>
check fiddle: https://jsfiddle.net/e9Ljou4q/ hope that worked检查小提琴： https ://jsfiddle.net/e9Ljou4q/希望有效
解决方案5
0 2018-05-27 12:24:38
You are clicking on a link ie the anchor tag, which itself has a native handling whenever a click event is called upon the anchor tag.您正在单击一个链接，即锚标记，每当在锚标记上调用单击事件时，它本身就有一个原生处理。 So, for making your click handling work you have to cancel the default handling by preventing the default behaviour of anchor tag for a click event.因此，为了使您的点击处理工作，您必须通过阻止点击事件的锚标记的默认行为来取消默认处理。 As you need to prevent the default action , so pass the event as a parameter in the callback function of jquery click handler.由于您需要阻止默认操作，因此将事件作为参数传递给 jquery click handler 的回调函数。
As.作为。 ('anchor-tag-class').bind( 'click', function(event) { ('anchor-tag-class').bind('click', function(event) {
event.preventDefault(); event.preventDefault();
Do your processing做你的处理
}); });
解决方案6
0 2022-05-12 15:53:52
Why don't you do this:你为什么不这样做：
$('a').click(function() {
alert('clicked');
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.