为什么不是'；我的悬停事件是否在JQuery中触发？_Jquery

为什么不是'；我的悬停事件是否在JQuery中触发？

jquery

为什么不是'；我的悬停事件是否在JQuery中触发？,jquery,Jquery,我不知道为什么我的活动没有启动？我只想在用户将鼠标悬停在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/

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


$（“.component ol li”）.hover（函数（）{
$（this.css（'list-style-type'，'disc'）；
}
);

现在，只要在DOM中添加了与

$（“.component ol li”）

匹配的内容，就会附加悬停函数。

这样编写javascript后，悬停函数就会工作

$(function(){

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

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

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

这将在渲染元素后执行（此操作有效）

如果您想将脚本放在最上面，您有两个选择：

使用
```
$（function（）{}）
```
：在DOMready上添加一个事件，这意味着当所有元素都加载时函数将启动
使用
```
$（）.live（）
```
：这将在窗口上添加一个检查目标的事件，这意味着即使在加载页面后，它也将处理添加的任何元素

参考

好吧，它在没有css的情况下适用于我：

也许您应该向我们展示它。

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

首先，我建议使用

 $(document).ready(function(){

     //your code here
 });

这应该能解决你的问题

除此之外，为了进一步提高性能，您可以将事件绑定到顶级元素，例如UL，而不是每个LI。这也将帮助您获得更好的性能。由于您使用的是jQuery1.4.2，因此可以很容易地使用jQueryDelegate来实现这一点

请随时澄清任何疑问

谢谢，
普拉纳夫考希克

我不喜欢

document.ready

，如果您的页面挂起以加载某些内容，则脚本运行将需要一段时间。与StackOverflow

收件箱

一样，它使用的是

文档就绪

，如果页面延迟了一点，您单击图标，则会被重定向，而不是显示弹出窗口。现在看来已经修好了。嗯，我同意。但这似乎是一个简单的页面，它不会对无数不同的服务器进行无数次调用。否则，使用从document.ready中删除块的第二个选项，并将脚本块放在列表项的右键位置之后。这是不正确的。您首先应该将脚本放在页面的底部，这意味着当应用悬停的DOM元素时，它们将存在。读了戴夫·沃德几周前写的文章，我对我所说的不真实感到困惑？关于无数的电话？关于在创建dom对象后放置脚本？我的意思是，这篇文章中唯一没有提到的是使用

.live（）

。哦，现在我意识到。。。JSFIDLE是否自动添加

$（document）.ready（function（）{…}）

：s

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

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

$(".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');
});

 $(document).ready(function(){

     //your code here
 });