Show alert when link clicked
Question
I am trying to show an alert when a link is clicked using jQuery like this..
$(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 answers
solution1
1 2018-05-27 12:08:25
You don't have element with class name of nav_link . Use navlink instead:
$(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>
solution2
0 2018-05-27 12:09:29
try this
$(document).ready(function() {
$(".navlink").click(function(e) {
e.preventDefault();
alert('clicked');
});
});
solution3
0 2018-05-27 12:13:47
You are using .nav_link class selector in your jQuery selector while your tags have navlink class. you should change it to navlink like the following :
$(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 :
$(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>
solution4
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
solution5
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.
As. ('anchor-tag-class').bind( 'click', function(event) {
event.preventDefault();
Do your processing
});
solution6
0 2022-05-12 15:53:52
Why don't you do this:
$('a').click(function() {
alert('clicked');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.