为什么我的JQuery悬停事件没有触发？

Question

为什么我的JQuery悬停事件没有触发？

4

我不确定为什么我的事件没有触发？我只是希望在用户悬停在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>

- George Johnston

6个回答

3

首先，我建议使用

 $(document).ready(function(){

     //your code here
 });

这应该可以解决你的问题。

此外，为了进一步提高性能，您可以将事件绑定到顶层元素，比如UL，而不是每个LI。这也有助于提高性能。由于您正在使用jQuery 1.4.2，因此可以很容易地使用jQuery delegate来实现。

如有任何疑问，请随时澄清。

谢谢，
Pranav Kaushik

pranavkaushik.wordpress.com

- Pranav Kaushik

2

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

这将在元素存在之前执行（这无法正常工作）。

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

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

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

如果您希望使脚本处于顶部位置，您有两种选择：

使用 $(function () { })：在DOM准备就绪时添加事件，这意味着当所有元素加载完成后，该函数将被触发。
使用 $().live()：这将在窗口上添加一个事件来检查目标，这意味着它将在页面加载后添加的任何元素上运行。

参考资料

- BrunoLM

0

只要你像这样编写你的JavaScript，它就会起作用

$(function(){

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

- tawfekov

0

你可以使用$.delegate方法创建一个mouseenter和mouseleave事件处理程序来管理你的hover效果。我知道你在代码中没有定义一个hover off处理程序，但是这里是如何使用delegate来做到这一点，这将在任何时候都适用于与选择器匹配的元素：

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

- Chris Love

0

对我而言它运行正常，没有你的 CSS: link

也许你应该把它展示给我们看看。

- Shikiryu

哦，现在我明白了... JSFiddle会自动添加 $(document).ready(function() { ...}) 吗？ :S - Shikiryu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- shoebox639 · Accepted Answer

<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中，您的鼠标悬停函数就会被附加。