$（「＃ID」）返回的翻譯：

這是代碼：

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

    })

我怎樣才能解決這個.. 。？

謝謝先進！

來源

2013-02-15 MrMangado

這裏沒什麼不對。 jQuery方法不會像vanilla DOM一樣返回完全相同的東西。使用'console.log（）'，而不是'alert（）'來進行調試。 – 2013-02-15 22:34:15

使用'console.log（）'進行調試，而不是警報。正如你看到的（jQuery）對象的字符串表示沒有用。 – JJJ 2013-02-15 22:34:24

在這裏玩有兩個問題。

一，你沒有使用jQuery的文檔準備功能。原因是，javascript會在找到時執行。當您調用$（「＃fh」）時，元素尚未從服務器下載。 這也是爲什麼你的document.getElementById(...)調用返回null，因爲在執行時是正確的。

使用文件準備好方法會等到該文件已被下載並分析執行代碼之前：

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

或者

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

另一個問題是你混淆jQuery的運行。

當您使用$("#fh")選擇器時，即使無法找到該元素，也會始終返回一個jQuery對象。 [object Object]輸出只是Firefox不知道如何將對象表示爲字符串。

您需要檢查返回的jQuery對象上的.length，以確定是否實際上選擇了某個事件來註冊事件處理程序。

來源

2013-02-15 22:37:51 Aren

確保您已經包裹在一個回調的document.ready你的代碼，因爲此刻的你執行你的代碼還沒有被加載的DOM：

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

但我建議你把你所有的JavaScript文件在您的DOM結束（例如jsu在關閉</body>標記之前），而不是在<head>部分。這樣你就不需要把它們包裝在一個document.ready回調中。

而就[Object] [Object]而言，我建議你使用console.log();而不是alert來調試你的javascript代碼。

來源

2013-02-15 22:34:16

downvote的任何理由？ downvoting時請留言。 – 2013-02-15 22:37:05

將試圖訪問document.ready中的元素的代碼換行。 jQuery的已建成的方法來做到這一點：

$(document).ready(function() {

甚至只是

$(function () {

OR將你的JavaScript向右</body>之前，以確保DOM內容的其餘部分被加載。

alert(document.getElementById('fh'))是null，因爲當您試圖在該點上獲取它時，該元素不存在於DOM中。 $()總是即使集合爲空也會返回jQuery集合對象。

來源

2013-02-15 22:36:20

開始使用$(document).ready(function(){})...中的jquery函數。只有在這裏你知道該頁面已經完全加載。試試這個：

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

來源

2013-02-15 22:36:48 Grzegorz

在我開始之前，我假設你想打印出DOM元素本身，而不是DOM元素中的文本，因爲你沒有說明其他方面。

因爲從技術上講，你正在返回一個html dom元素，其alert（）函數並不真正如何處理，你可以通過兩種方法之一來解決這個問題。最簡單的方法是

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

，你可以在它位於它的調試器（命中CTR +無論是在Firefox或Chrome Shift + C）你的瀏覽器控制檯中查看。

來源

2013-02-15 22:42:45

$（「＃ID」）返回的翻譯：

回答

相關問題