$ ('# Идентификатор') возвращает [объект Object]

Это код:

<!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').click(function(){ 

     alert('alert!'); 

    })

Как я могу решить эту проблему .. .?

Спасибо заранее!

источник

2013-02-15 MrMangado

Здесь ничего плохого. Методы jQuery не возвращают точно то же самое, что и ванильные DOM. Используйте 'console.log()', а не 'alert()', для отладки. –

Используйте 'console.log()' для отладки, а не оповещений. Как вы видите, строковое представление объекта (jQuery) не полезно. – JJJ

Там две проблемы в игре здесь.

Во-первых, вы не используете функцию готовности документа из jQuery. Причина в том, что javascript выполняется так, как он найден. Когда вы вызываете $ ("# fh"), элемент еще не загружен с сервера. Это также почему ваш document.getElementById(...) звонок возвращает null, потому что на момент совершения это правильно.

Используя готовый метод документа будет ждать, пока документ был загружен и разобран перед выполнением кода:

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

Или

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

Другая проблема, ты путаешь хау JQuery работы ,

Когда вы используете селектор $("#fh"), он всегда будет возвращать объект jQuery, даже если он не может найти элемент. вывод [object Object] - это просто Firefox, не зная, как представлять объект в виде строки.

Вам нужно проверить .length на возвращаемом объекте jQuery, чтобы узнать, действительно ли что-то выбрано для регистрации обработчиков событий.

источник

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. –

Оберните свой код, который пытается получить доступ к элементам в document.ready. JQuery имеет встроенные методы, чтобы сделать это:

$(document).ready(function() {

или даже просто

$(function () {

ИЛИ переместить JavaScript, чтобы прямо перед </body> чтобы обеспечить загрузку остальной части содержимого DOM.

alert(document.getElementById('fh'))null потому что этот элемент не существует в DOM, когда вы пытаетесь его получить. $()всегда возвращает объект коллекции jQuery, даже если коллекция пуста.

источник

2013-02-15 22:36:20

Начать использование функций jquery в $(document).ready(function(){}).... Только здесь вы знаете, что страница полностью загружена. Попробуйте это:

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

источник

2013-02-15 22:36:48 Grzegorz

Прежде чем начать, я предполагаю, что вы хотите распечатать сам элемент DOM, а не текст в элементе DOM, так как вы не сказали другого мудрым.

Поскольку технически вы возвращаете элемент html dom, который функция alert() на самом деле не работает, вы можете разрешить это одним из двух способов. Самый простой способ

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

, которые вы можете просматривать в вашем броузере консоли, которая находится в его отладчик (хит Ctr + Shift + C в любом светлячок или хром).

источник

2013-02-15 22:42:45

$ ('# Идентификатор') возвращает [объект Object]

ответ

Смежные вопросы