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

コードを実行した時点ではDOMがまだロードされていないため、コードをdocument.readyコールバックでラップしていることを確認してください。

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

ただし、すべてのjavascriptファイルをDOMの最後（たとえば、終了</body>タグの前のjsu）に配置し、<head>セクションには配置しないことをお勧めします。このように、document.readyコールバックでそれらをラップする必要はありません。

そして、に関する限り、 javascriptコードをデバッグする代わりに[Object] [Object]を使用することをお勧めします。console.log();alert

于 2013-02-15T22:34:16.427 に答える
1

ここでは2つの問題があります。

1つは、jQueryのドキュメントレディ関数を使用していないことです。その理由は、javascriptが見つかったとおりに実行されるためです。$（ "＃fh"）を呼び出すと、要素はまだサーバーからダウンロードされていません。これは、実行時に正しいため、document.getElementById(...)呼び出しがnullを返す理由でもあります。

ドキュメントの準備ができたメソッドを使用すると、コードを実行する前に、ドキュメントがダウンロードされて解析されるまで待機します。

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

または

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

もう1つの問題は、jQueryがどのように機能するかを混乱させていることです。

セレクターを使用すると$("#fh")、要素が見つからない場合でも、常にjQueryオブジェクトが返されます。出力は、[object Object]オブジェクトを文字列として表現する方法を知らないFirefoxです。

.length返されたjQueryオブジェクトをチェックして、イベントハンドラーを登録するために実際に選択されたものがあるかどうかを確認する必要があります。

于 2013-02-15T22:37:51.360 に答える
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

でjquery関数の使用を開始し$(document).ready(function(){})...ます。ここでのみ、ページが完全に読み込まれていることがわかります。これを試して：

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

始める前に、他の方法で言わなかったので、DOM要素のテキストではなくDOM要素自体を印刷したいと仮定しています。

技術的には、alert（）関数が実際には処理方法を示さないhtml dom要素を返すため、2つの方法のいずれかでこれを解決できます。最も簡単な方法は

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

これは、デバッガーにあるブラウザーコンソールで表示できます（FirefoxまたはChromeでctr + shift + cを押します）。

于 2013-02-15T22:42:45.830 に答える