Question

我不确定为什么我的活动没有解雇？我只想在用户将鼠标悬停在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>

Answer 1

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

现在，只要匹配$(".component ol li")匹配到DOM，您的悬停功能就会被附加。

Answer 2

首先我建议使用

 $(document).ready(function(){

     //your code here
 });

这可以解决您的问题。

除此之外，为了进一步提高性能，您可以将事件绑定到顶级元素，例如UL而不是每个LI。这有助于您提取更好的性能。由于您使用的是jQuery 1.4.2，因此您可以轻松地使用jQuery委托。

随意澄清任何疑问。

谢谢，
Pranav Kaushik

pranavkaushik.wordpress.com

Answer 3

因为您正在选择尚不存在的元素。

这将在元素存在之前执行（这不起作用）

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

这将在元素渲染后执行（这可以）

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

如果您希望自己的脚本位于首位，则有两种选择：

使用$(function () { })：在DOMready上添加一个事件，这意味着当所有元素加载时该函数将被触发。
使用$().live()：这将在窗口上添加一个将检查目标的事件，这意味着即使在页面加载后它也会对添加的任何元素起作用。

<强>参考

Answer 4

一旦你编写像这样的javascript就可以了。

$(function(){

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

Answer 5

嗯，它适用于我没有你的css：link

也许你应该向我们展示。

Answer 6

您可以使用$ .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');
});

为什么我的悬停事件不会在JQuery中触发？

6 个答案: