Почему мое событие наведения не запускается в JQuery? - PullRequest
Новая
       14

Почему мое событие наведения не запускается в JQuery?

4 голосов
/ 22 октября 2010

Я не уверен, почему мое мероприятие не проходит? Я просто хочу изменить тип стиля списка, когда пользователь наводит курсор мыши на li. Не похоже, что я что-то упускаю, но ничего не происходит. 

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <link href="theme.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript">
  $(".component ol li").hover(function() {
          $(this).css('list-style-type', 'disc');
      }
   );
</script>
<body>
    <form id="form1" runat="server">
     <div class="component">
     <ol>
         <li><a href="#"></a>&nbsp;</li>
         <li><a href="#"></a>&nbsp;</li>
         <li><a href="#"></a>&nbsp;</li>
         <li><a href="#"></a>&nbsp;</li>
         <li><a href="#"></a>&nbsp;</li>
     </ol>
     </div>    
    </form>
</body>
</html>

Ответы [ 6 ]

9 голосов
/ 22 октября 2010 
<script type="text/javascript">
  $(document).ready(function() {
     $(".component ol li").hover(function() {
          $(this).css('list-style-type', 'disc');
        }
     );
   });
</script>

Если у вас нет document.ready, оно выполняется до того, как ваши элементы списка добавляются в DOM, поэтому в основном ничего не делает.Или переместите весь этот раздел после элементов списка.

РЕДАКТИРОВАТЬ: для дальнейшего обсуждения: Лучше не использовать document.ready, так как он должен ждать, пока все на странице завершит загрузку для запуска.С учетом вышесказанного вы всегда можете поместить эти «инициализирующие» блоки в конец html, чтобы убедиться, что все объекты DOM создаются при выполнении этого.

Или второй объект должен использовать .live().Эта функция будет прикреплять событие к результату селектора всякий раз, когда создается элемент, который соответствует селектору.Теперь вы можете держать этот блок сверху и использовать: 

<script type="text/javascript">
   $(".component ol li").live('hover', function() {
      $(this).css('list-style-type', 'disc');
   });
</script>

Теперь, когда в DOM добавляется что-то, совпадающее с $(".component ol li"), ваша функция наведения будет присоединена.

3 голосов
/ 22 октября 2010

Сначала я бы порекомендовал использовать 

 $(document).ready(function(){

     //your code here
 });

Это должно решить вашу проблему.

Кроме того, для дальнейшего повышения производительности вы можете привязать событие к элементу верхнего уровня, скажем, UL вместо каждого LI. Это также поможет вам повысить производительность. Поскольку вы используете jQuery 1.4.2, вы можете легко использовать для этого делегат jQuery.

Не стесняйтесь прояснить любые сомнения.

Спасибо
Пранав Каушик

pranavkaushik.wordpress.com

2 голосов
/ 22 октября 2010

Поскольку вы выбираете элементы, которые еще не существуют.

Это будет выполнено до того, как элемент будет существовать (это не работает) 

<script></script>
<ul></ul>

Это будет выполнено после рендеринга элемента (это работает) 

<ul></ul>
<script></script>

Если вы хотите, чтобы ваш скрипт был сверху, у вас есть два варианта:

  • Использование $(function () { }): добавляет событие в DOMready, это означает, что функция будет срабатывать при загрузке всех элементов.
  • Использование $().live(): это добавит событие в окно, которое проверит цель, то есть будет работать с любым элементом, добавленным даже после загрузки страницы.

Ссылка

0 голосов
/ 22 октября 2010

Вы можете использовать метод $ .delegate, чтобы создать указатель мыши и обработчик события mouseleave для управления вашим эффектом наведения.Я знаю, что вы не определили обработчик зависания в своем коде, но вот как вы это сделаете, используя делегат, который будет работать всякий раз, когда у вас есть элементы, соответствующие селекторам: 

$(".component ol").delegate("li", "mouseenter", function(e) {
  $(this).css('list-style-type', 'disc');
});

$(".component ol").delegate("li", "mouseleave", function(e) {
  $(this).css('list-style-type', 'circle');
});
0 голосов
/ 22 октября 2010

Ну, это работает для меня без вашего css: ссылка

Может быть, вы должны показать это нам.

0 голосов
/ 22 октября 2010

это будет работать, как только вы напишите свой javascript следующим образом 

$(function(){

  $(".component ol li").hover(function() {
          $(this).css('list-style-type', 'disc');
      }
   );
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...