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

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

<%@ 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>

источник

2010-10-22 George Johnston

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

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

EDIT: для дальнейшего обсуждения: лучше не использовать document.ready, так как он должен ждать, пока все на странице закончит загрузку. С учетом этого вы всегда можете поместить эти «инициализирующие» блоки в конец html, чтобы убедиться, что все объекты DOM создаются при его выполнении.

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

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

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

источник

2010-10-22 15:25:07 shoebox639

совершенен. Благодарю. –

Мне не нравится 'document.ready', если ваша страница зависает, чтобы загрузить что-то, на выполнение скрипта потребуется некоторое время. Подобно StackOverflow 'inbox', он использовал' document ready', и если страница немного задержалась, и вы нажали значок, который вы перенаправили, а не отображали всплывающее окно. Теперь это кажется исправленным. – BrunoLM

Ммм, согласен. Но это похоже на простую страницу, которая не вызывает звонков на миллион разных серверов. В противном случае используйте вторую возможность вывести блок из document.ready и просто поместить блок сценария после того, как вы правы в элементах списка. – shoebox639

он будет работать, как только вы пишете JavaScript, как этот

$(function(){ 

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

источник

2010-10-22 15:28:53 tawfekov

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

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

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

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

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

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

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

Ссылка

источник

2010-10-22 15:34:58 BrunoLM

Ну, это работает для меня без вашего CSS: link

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

источник

2010-10-22 15:39:16 Shikiryu

О, теперь я понимаю ... Добавляет ли JSFiddle '$ (document) .ready (function() { ...})' автоматически? : S – Shikiryu

Вы можете использовать метод $ .delegate для создания обработчика событий mouseenter и 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'); 
});

источник

2010-10-22 16:35:44

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

$(document).ready(function(){ 

    //your code here 
});

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

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

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

Спасибо,
Pranav Кошик

pranavkaushik.wordpress.com

источник

2010-10-22 17:03:06

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

ответ

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