Question

我遇到了jquery问题，我无法弄清楚它为什么会这样。也许这里有人可以帮助我。

这是我的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>

当我点击“关于”链接时，没有任何反应。

Answer 1

一些事情。确保在document的{{1}}处理程序中绑定事件（或者至少在呈现元素之后），并确保阻止链接的默认行为（即导航页面到ready）：

href

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

此外，元素的$(document).ready(function () { $("#aboutbtn").click(function(e){ e.preventDefault(); $("#slideshowContainer").fadeOut(); }); });必须是唯一的，否则jQuery选择器只会匹配第一个，并且可能因此而无法达到预期效果。

此外，如果链接被动态添加到页面（与AJAX一样），则事件处理程序将不会像这样正确绑定，因为无法找到该元素。这是因为，正如我在开头所说的那样，处理程序必须在元素渲染后绑定。因此，您必须将事件绑定到新内容，或者可能更容易/更有效，您可以使用事件委派。通过此操作，您可以将事件绑定到稳定的容器元素（未动态添加/删除的元素），并将处理程序委派给特定的选择器。例如，像：

id

有时，您可以将$(document).ready(function () { $("#container_element_id").on("click", "#aboutbtn", function(e){ e.preventDefault(); $("#slideshowContainer").fadeOut(); }); });用于此选择器（而不是document），但通常可以缩小范围。

Answer 2

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

你应该在document.ready或$（function（）{}）;中编写代码。另外，它不起作用。

jquery fadeOut（）问题

2 个答案: