0

我有一个 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>

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

4

2 回答 2

2

一些东西。document确保在' 的处理程序中绑定事件ready（或至少在呈现元素之后），并确保防止链接的默认行为（将页面导航到其href）：

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

演示：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-09T01:46:39.707 回答
0 
$(document).ready(function(){
  $("#aboutbtn").click(function(){
    $("#slideshowContainer").fadeOut();
   })
});

您应该在 document.ready 或 $(function(){}); 中编写代码。否则它不会工作。

于 2013-05-09T04:42:13.320 回答