Question

这是代码：

<!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!');

  })

我该如何解决这个问题？？

谢谢你的进步！

Answer 1

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

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

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

就[Object] [Object]而言，我建议您使用console.log();代替alert来调试您的JavaScript代码。

Answer 2

这里有两个问题。

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

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

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

或者

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

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

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

您需要检查返回的jQuery对象上的.length，以确定是否确实选择了注册事件处理程序。

Answer 3

包装试图访问document.ready中元素的代码。 jQuery内置了一些方法：

$(document).ready(function () {

甚至只是

$(function  () {

OR 将您的JavaScript移至</body>之前，以确保加载其余DOM内容。

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

Answer 4

在$(document).ready(function(){})...中开始使用jquery函数。只有在这里您才知道页面已满载。试试这个：

$(document).ready(function() {
   $('#fh').click(function(){
      alert('alert!');
   }) ;
}) ;

Answer 5

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

因为从技术上讲你正在返回一个html dom元素，其中alert（）函数实际上并没有如何处理，你可以通过两种方式之一来解决这个问题。最简单的方法是

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

你可以在你的浏览器控制台中查看它位于它的调试器中（在firefox或chrome中点击ctr + shift + c）。

$（'＃id'）返回[object Object]

5 个答案: