單擊鏈接時顯示警報
[英]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>
由於某種原因它不起作用，誰能發現我做錯了什么？
6 個解決方案
解決方案1
1 2018-05-27 12:08:25
您沒有類名為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>
解決方案2
0 2018-05-27 12:09:29
嘗試這個
$(document).ready(function() {
$(".navlink").click(function(e) {
e.preventDefault();
alert('clicked');
});
});
解決方案3
0 2018-05-27 12:13:47
您在 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>
解決方案4
0 2018-05-27 12:15:36
這是它的代碼：
<!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/希望有效
解決方案5
0 2018-05-27 12:24:38
您正在單擊一個鏈接，即錨標記，每當在錨標記上調用單擊事件時，它本身就有一個原生處理。 因此，為了使您的點擊處理工作，您必須通過阻止點擊事件的錨標記的默認行為來取消默認處理。 由於您需要阻止默認操作，因此將事件作為參數傳遞給 jquery click handler 的回調函數。
作為。 ('anchor-tag-class').bind('click', function(event) {
event.preventDefault();
做你的處理
});
解決方案6
0 2022-05-12 15:53:52
你為什么不這樣做：
$('a').click(function() {
alert('clicked');
});
單擊鏈接時如何使用 jQuery 發出警報？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.