取消绑定窗口Jquery后绑定

Question

我正在创建一个页面，其中包含两个部分，我通过单击标题将内容 .load() 加载到 #container 中。

<div id=dogs>[dogs]</div> 
<div id=cats>[cats]</div>
<div id=#container></div>
<div class=button_dogs></div>

我的问题

我有一个右下角固定按钮，我只希望它显示在#dogs 部分（而不是 cat 部分）中，并且页面默认使用#dog 部分初始化，所以我的代码是类似的东西

$("#container").load("content.php?s=dogs"); //initial

$("#cats").click(){function(){
      $("#container").load("content.php?s=cats"); //after click
      $(".button_dogs").hide();
      $(window).unbind(".button");
}}

$("#dogs").click(){function(){
      $("#container").load("content.php?s=dogs"); //after click
      $(".button_dogs").show(); 
      $(window).bind("scroll.button");

}}

这是绑定到window的固定按钮

$(".button_dogs").hide();
$(window).bind("scroll.button", function(){
      if($(this).scrollTop()>50) {
          $(".button_dogs").show()
      } else {
          $(".button_dogs").fadeOut()
      }
});

我不知道自己做错了什么，点击#dogs时再次绑定固定按钮功能，但与之前的效果不起作用。这是我怀疑的行（来自#dogs 点击事件）

$(".button_dogs").show();   
$(window).bind("scroll.button");

Answer 1

首先，您需要将元素 ID 和类用引号括起来。有些浏览器不在乎，但有些则在乎。另外，除非您使用选择器来查找它，否则不要在容器 ID 前加上哈希...

<div id="dogs">[dogs]</div> 
<div id="cats">[cats]</div>
<div id="container"></div>
<div class="button_dogs"></div>

您可以做您想做的事，而无需删除和重新添加事件处理函数。此方法将使用内容 div 上的数据属性来指定内容类型是什么，因此如果不是狗内容，则滚动处理程序可以简单地退出...

// keep a reference to the content div, rather than keep looking it up...
var $container = $("#container");

$("#cats").click(function() {
    $container
        .load("content.php?s=cats")
        .data("content", "cats");       // add a data attribute that has the value "cats"
});

$("#dogs").click(function() {
    $container
        .load("content.php?s=dogs")
        .data("content", "dogs");       // add a data attribute that has the value "dogs"
});

$(".button_dogs").hide();

$(window).bind("scroll.button", function() {
    // if the content is not dogs then exit this function...
    if ($container.data("content") != "dogs") return;

    if ($(this).scrollTop() > 50) {
        $(".button_dogs").show();
    }
    else {
        $(".button_dogs").fadeOut();
    }
});

$("#dogs").trigger("click");  // click the dogs button to initialize the page

我还添加了变量$content，它是对#content 元素的引用，因此您无需在每次引用它时都继续查找它。使用 ID 进行重复查找并没有那么昂贵，但这是一个养成的好习惯。

最后，我添加了在页面加载时单击狗按钮的代码，而不是复制发生这种情况时执行的代码。