Question

我尝试在使用Kubuntu Linux的计算机上运行Firefox 27.0.1和Chrome 30.0.1599.114中的以下代码，但没有任何反应。

html页面是基于Spring MVC框架的Web应用程序的一部分，并放在WEB-INF / jsp文件夹中。有人可以在下面的代码中找到任何错误吗？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>HorarioLivre</title>

  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <script>
  $('a').click(function() {
      alert("clicou em um link");
  });
  </script>

  <link rel="stylesheet" href="css/style-main.css">
  <link rel="stylesheet" href="css/style-popup.css">
</head>
<body>
  <header>
    <div class="container">
      <h1><a href="#">HorarioLivre</a></h1>
      <nav>
        <ul>
          <li><a href="listagem_evento.html" class="icon evento">Eventos</a></li>
          <li><a href="cadastra_horario.html" class="icon horario">Cadastrar Horarios</a></li>
          <li><a href="listagem_horario.html" class="icon horario">Listar Horarios</a></li>
          <li><a href="listagem_usuario.html" class="icon usuario">Usuarios</a></li>
          <li><a href="#">${usuario.nome}</a>
            <ul>
                <li><a href="usuario_perfil.html" class="icon perfil">Perfil</a></li>
                <li><a href="usuario_config.html" class="icon settings">Configura&ccedil;&otilde;es</a></li>
                <li><a href="#">Logout</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <div id="results">
        <a href="#" id="close">Fechar</a>
        <div id="content"></div> 
  </div>
</body>
</html>

Answer 1

你没有说出你的“错误”是什么，但我的猜测是你已经遗漏了文档就绪处理程序，所以当你的选择器运行时，元素还没有准备好在DOM中。

$(function() {
  $('a').click(function() {
      alert("clicou em um link");
  });
});

Answer 2

您需要将代码包装在DOM就绪处理程序$(document).ready(function() {....})或更短的$(function() {.... })内，以确保在执行jQuery代码之前将所有元素正确添加到DOM中。

$(function() {
    $('a').click(function() {
        alert("clicou em um link");
    });
});

Answer 3

您正在选择脚本运行时存在的所有a元素（因为脚本在head中运行，并且所有a元素都存在于身体）和做他们的东西。

将脚本移至</body>之前或创建一个函数并在DOM ready上运行它。

jQuery(function () {
    $('a').click(function() {
        alert("clicou em um link");
    });
});

...然后会有可以操作的实际a元素。

浏览器无法识别javascript / jquery代码

3 个答案: