JQuery - как использовать событие hover () в списке DIV? - PullRequest
Новая
       18

JQuery - как использовать событие hover () в списке DIV?

0 голосов
/ 28 января 2010

У меня есть следующий HTML: 

<div id="panel">
  <div class="listing" id="ref_1">...</div>
  <div class="listing" id="ref_2">...</div>
  <div class="listing" id="ref_3">...</div>
  <div class="listing" id="ref_4">...</div>
</div>

Что я хотел бы сделать, так это когда кто-то наводит курсор на div.listing, чтобы alert() вывести на экран имя id.

Значение, если человек наводит курсор мыши с id="ref_3" на alert("ref_3");

Вопрос : Как мне сделать это с JQuery / Javascript?

UPDATE

Ссылка ниже на живой сайт. Как вы увидите, ни один из ответов ниже не работает. (Строка 340)

http://tinyurl.com/ybbey4

Любая рекомендация?

Ответы [ 6 ]

1 голос
/ 28 января 2010 
$('.listing').bind('mouseover',function(){
alert($(this).attr('id'));
});

Этот код работает здесь .

UPDATE

глядя на ваш код, вы можете попробовать это вместо: 

$('.hlisting').live('mouseover',function(){
alert($(this).attr('id'));
});
0 голосов
/ 29 января 2010

Событие mouseenter обычно лучше, чем mouseover. От http://api.jquery.com/mouseenter/:

"Событие mouseenter отличается от mouseover тем, как оно обрабатывает всплывающее событие. Если mouseover использовался в этом примере, то когда указатель мыши перемещался над внутренним элементом, обработчик срабатывал. Обычно это нежелательное поведение. Событие mouseenter, с другой стороны, запускает свой обработчик только тогда, когда мышь вводит элемент, к которому она привязана, а не его потомка. "

jQuery('#panel div.listing').bind('mouseenter',function(){
  alert(this.id);
  return false;
});
0 голосов
/ 29 января 2010

Кажется, отлично работает отдельно от вашего сайта ...

Я бы предложил добавить в код div с классом hslisting. Не используйте JS, чтобы ввести его. Посмотрите, вызывает ли что-то проблемы с тем, как вы делаете инъекцию.

http://jsbin.com/agosa работает просто отлично.

0 голосов
/ 28 января 2010

BillyJ, похоже, вы не загружаете библиотеку jQuery в своем HTML-файле.

Не забудьте включить <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> в ваш файл перед вызовом вышеуказанной функции.

0 голосов
/ 28 января 2010

Используете ли вы в настоящее время $ как функцию в другом файле сценария, и не используете noConflict

0 голосов
/ 28 января 2010

еще лучше 

$('#panel div.listing').mouseover(function() {
  alert($(this).attr('id'));
});

это работает 

<!DOCTYPE>
<html>
<head><title>test</title>
<style type="text/css">
.listing { width: 100px; height: 100px; border: 1px black solid; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.4.1");
  google.setOnLoadCallback(function() {
    $('#panel div.listing').mouseover(function() {
        alert($(this).attr('id'));
    });
  });
</script></head>
<div id="panel">
  <div class="listing" id="ref_1">...</div>
  <div class="listing" id="ref_2">...</div>
  <div class="listing" id="ref_3">...</div>
  <div class="listing" id="ref_4">...</div>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...