解除绑定后绑定 window Jquery

Question

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

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

我的问题

我有一个 right-bottom 固定按钮，我只希望它显示在 #dogs 部分（而不是猫部分），页面默认初始化为 #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时它再次绑定了固定按钮功能，但它与before.This的效果不起作用是我有疑问的行（来自#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>

您可以在不删除和 re-adding 事件处理函数的情况下做您想做的事。此方法将使用内容上的数据属性 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，重复查找的成本并不高，但养成好习惯。

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

解除绑定后绑定 window Jquery

bind after unbind window Jquery

jquery

bind

unbind