jquery fadeout（）問題

我有一個jQuery的問題，我不明白爲什麼會這樣。也許這裏有人可以幫助我。jquery fadeout（）問題

這裏是我有的jquery方法（只是一個簡單的fadeOut（））。

$("#aboutbtn").click(function(){ 
    $("#slideshowContainer").fadeOut(); 
});

這裏是我正在使用的按鈕和我正在使用的div。

<div id="slideshowContainer"> 
    <div class="slideshow"> 
     testing 
    </div> 
    <ul id="nav"> 
    <!--<li id="prev"><a href="#">Previous</a></li> 
    <li id="next"><a href="#">Next</a></li>--> 
    </ul> 
</div> 

<a id="aboutbtn" class="menuitem" href="#">About</a>

當我點擊關於鏈接時，什麼都不會發生。

來源

2013-05-09 user2363182

有幾件事。確保您在document的ready處理程序（或至少在元素已被渲染後）中綁定事件，並確保您阻止鏈接的默認行爲（即將頁面導航到其href）：

$(document).ready(function() { 
    $("#aboutbtn").click(function(e){ 
     e.preventDefault(); 
     $("#slideshowContainer").fadeOut(); 
    }); 
});

DEMO：http://jsfiddle.net/g6dzd/

此外，元素的id必須是唯一的，否則jQuery選擇將只匹配第一個，可能不是你所期望的，因爲它是什麼。另外，如果鏈接動態添加到頁面（就像使用AJAX一樣），事件處理程序將不會像這樣正確綁定，因爲找不到該組件。這是因爲，就像我在開始時所說的那樣，處理程序必須在元素渲染後進行綁定。因此，您必須將事件綁定到新內容，或者可能更容易/更有效，您可以使用事件委派。通過這種方式，您可以將一個事件綁定到一個穩定的容器元素（一個不會動態添加/刪除的元素），並將該處理程序委託給特定的選擇器。例如，像：

$(document).ready(function() { 
    $("#container_element_id").on("click", "#aboutbtn", function(e){ 
     e.preventDefault(); 
     $("#slideshowContainer").fadeOut(); 
    }); 
});

有時候，你可以使用document，這個選擇（而不是#container_element_id），但通常可以縮小。

來源

2013-05-09 01:46:39 Ian

也可能希望確保頁面中不超過一個'aboutbtn'，並且在頁面加載後不會動態創建內容。 – jfriend00 2013-05-09 01:49:31

@ jfriend00我需要列出應該包含在答案中的事項的清單，因爲OP往往沒有提到通常適用於我們提到的事情之一的事情。始終包含所有內容可能更容易。我會更新，謝謝:) – Ian 2013-05-09 01:50:48

非常感謝。我有另一個名爲aboutbtn的元素。 d'oh – user2363182 2013-05-09 01:57:59

$(document).ready(function(){ 
    $("#aboutbtn").click(function(){ 
    $("#slideshowContainer").fadeOut(); 
    }) 
});

您應該將代碼寫入document.ready或$（function（）{}）;.其他方面它不會工作。

來源

2013-05-09 04:42:13

jquery fadeout（）問題

回答

相關問題