爲什麼我的懸停事件不是在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是得到執行，因此，它基本上什麼都不做。或者將整個部分移到列表項後面。

編輯：進一步討論：最好的做法是不要使用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

完美。謝謝。 – 2010-10-22 15:26:08

我不喜歡'document.ready'，如果你的頁面掛起來加載一些腳本運行需要一段時間。像StackOverflow的「收件箱」一樣，它使用的是「文檔準備好」，如果頁面延遲了一下，並且您單擊了重定向的圖標，而不是顯示彈出窗口。現在它似乎是固定的。 – BrunoLM 2010-10-22 15:37:29

嗯，我同意。但是這似乎是一個簡單的頁面，它不會對數十萬個不同的服務器進行數百萬次調用。否則，使用第二個選項來取出document.ready中的塊，然後將腳本塊放在您正確列出項目的位置之後。 – shoebox639 2010-10-22 15:43:43

一旦你寫你的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

嗯，這對我的作品的w/o你的CSS：link

也許你應該把它展現給我們的。

來源

2010-10-22 15:39:16 Shikiryu

哦，現在我明白了...... JSFiddle是否會自動添加'$（document）.ready（function（）{}}？：S – Shikiryu 2010-10-22 15:40:20

您可以使用$ .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中觸發的？

回答

相關問題