Question

我正试图在使用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>

由于某些原因它无法正常工作，有人能发现我做错了吗？

Answer 1

您没有类名为nav_link的元素。请改用navlink：

＆＃13;

$(document).ready(function() {
  $(".navlink").click(function() {
    alert('clicked');
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

试试这个

$(document).ready(function() {
     $(".navlink").click(function(e) {
        e.preventDefault();
                alert('clicked');
            });

    });

Answer 3

您的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>

Answer 4

这是代码：

    <!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/ 希望有用

Answer 5

您正在点击链接，即锚标记，每当在锚标记上调用click事件时，锚标记本身就具有本机处理。因此， 用于使您的点击处理工作，您必须通过阻止点击事件的锚标记的默认行为来取消默认处理。 由于您需要阻止默认操作，因此将事件作为参数传递给jquery click handler的回调函数。

为。 （'anchor-tag-class'）。bind（'click'，function（event）{

<强> event.preventDefault（）;

进行处理

<强>}）;

单击链接时显示警报

5 个答案: