0

这是代码：

<!DOCTYPE html>
<html>
<head>

   <title>Pixgalery</title>

   <link rel="shortcut icon" href="/favbar.png" />

   <link rel='stylesheet' href='/stylesheets/style.css'/>
   <!-- JavaScript -->
   <script src="http://code.jquery.com/jquery-latest.js"></script>
   <script type="text/javascript">

            alert($('#fh'));

   </script>
   <script src="/stylesheets/bootstrap/js/bootstrap.min.js"></script>
   <!-- CSS -->
   <link href="/stylesheets/bootstrap/css/bootstrap.min.css" rel="stylesheet"
   media="screen">
   <link href="/stylesheets/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="/stylesheets/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

   <style type="text/css">

      body {

        <% if(user.background == ''){ %>

            background: rgb(241, 241, 241) url('/noise_filter.png');

        <% } else {%>

            background: url('.<%= user.paths %><%= user.background %>') fixed;

        <% } %>


       }

  </style>

</head>
<body>
<div class="navbar-static-top navbar-inverse navbar">
  <div class="navbar-inner">
   <div class="container">


  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>

  <a class="brand" href="#">Pixgalery</a>


  <div class="nav-collapse collapse">
  <ul class="nav">
  <li><a href="/home">Home</a></li>
  <li><a href="/<%= req %>">Profile</a></li>
  <li><a href="#">Messages</a></li>
  </ul>  
  <ul class="nav pull-left">
    <form class="navbar-search pull-left">
       <input type="text" class="search-query" placeholder="Search...">
    </form>
  </ul>


  </div>

 </div>
 </div>
</div>

<div style="margin-top: 15px;" class="container-fluid">
 <div class="row-fluid">
  <div class="span1"></div>
  <div class="span6">

  </div>
  </div>

<div class="span4">

    <aside>

         <center><h2 style="margin-top: 0px;"><%= photo.author %></h2></center>
         <table style="margin-top: 5px" class="table">
         <tbody style="background: white;">
            <tr>
              <td>
                    <h4>Views <small><%= photo.views %></small></h4>
              </td>
            </tr>
            <tr>
              <td>
               <h4>Favourites <small><%= photo.fav %></small></h4>  
                    <button class="btn btn-inverse" id="fh">
                       <i style="margin-right: 5px;" class="icon-heart icon-white"></i>
                        Favorite</button> 
              </td>
            </tr>
            <tr>
            </tr>
         </tbody>
        </table>
    </aside>

   </div>
  </div>
 </div>

 </head>
</body>

当我收到警报alert($('#fh'))时，警报会显示给我[object Object]，或者即使我收到了，我也会alert(document.getElementById('fh')收到null，因此，我无法通过诸如click(). 当我输入控制台`$('#fh')'时，我得到了元素，但我不知道为什么，例如这不起作用：

  $('#fh').click(function(){

      alert('alert!');

  })

我该如何解决这个...？

谢谢提前！

4

5 回答 5

1

确保您已将代码包装在 document.ready 回调中，因为在您执行代码时，DOM 尚未加载：

<script type="text/javascript">
     $(function() {
         alert($('#fh'));
     });
</script>

但我建议您将所有 javascript 文件放在 DOM 的末尾（例如 jsu 在结束</body>标记之前），而不是放在该<head>部分中。这样您就不需要将它们包装在 document.ready 回调中。

就[Object] [Object]而言，我建议您使用 aconsole.log();而不是alert来调试您的 javascript 代码。

于 2013-02-15T22:34:16.427 回答
1

这里有两个问题。

一，您没有使用 jQuery 的文档就绪功能。原因是，javascript 在找到时执行。当您调用 $("#fh") 时，尚未从服务器下载该元素。这也是您的document.getElementById(...)调用返回 null 的原因，因为在执行时这是正确的。

使用文档就绪方法将等到文档下载并解析之后再执行代码：

$(document).ready(function() {
   // Code here
});

或者

$(function() {
   // Code here
});

另一个问题是您对 jQuery 的工作方式感到困惑。

当你使用$("#fh")选择器时，它总是会返回一个 jQuery 对象，即使它找不到元素。[object Object]输出只是 Firefox 不知道如何将对象表示为字符串。

您需要检查.length返回的 jQuery 对象以判断是否确实选择了某些东西来注册事件处理程序。

于 2013-02-15T22:37:51.360 回答
0

在我开始之前，我假设您想要打印出 DOM 元素本身而不是 DOM 元素中的文本，因为您没有说其他明智的。

因为从技术上讲，您正在返回一个 html dom 元素，而 alert() 函数实际上并没有如何处理您可以通过以下两种方式之一解决此问题。最简单的方法是

console.log($('#fh'));

您可以在位于其调试器中的浏览器控制台中查看（在 firefox 或 chrome 中按 ctr+shift+c）。

于 2013-02-15T22:42:45.830 回答
0

将尝试访问元素的代码包装在document.ready. jQuery 内置了执行此操作的方法：

$(document).ready(function () {

甚至只是

$(function  () {

或者将您的 JavaScript 移到前面</body>，以确保加载其余的 DOM 内容。

alert(document.getElementById('fh'))是null因为当您尝试获取该元素时，该元素在 DOM 中不存在。 即使集合为空，也$() 总是返回一个 jQuery 集合对象。

于 2013-02-15T22:36:20.787 回答
0

开始在$(document).ready(function(){}).... 只有在这里您才知道页面已完全加载。尝试这个：

$(document).ready(function() {
   $('#fh').click(function(){
      alert('alert!');
   }) ;
}) ;
于 2013-02-15T22:36:48.273 回答