javascript - jquery 先用off解除事件綁定 再on綁定事件就不起作用了?
習慣沉默
習慣沉默 2017-06-12 09:28:16
0
4
957

點擊查看手機版demo

主要JS程式碼

    //显示侧边栏
    $("#drap").click(function(){
        $(".footer_fixed").hide();
        $(".sidebar").animate({right:"0%"});
        $(".modelBlack").fadeIn("fast");
        $(document).off("click");   //先解除事件绑定
        $(document).on("click");   //再绑定事件,就不起作用了?
    })

    //点击空白区域关闭
    $(document).off("click").click(function(e){
      var _con = $('.sidebar');   // 设置目标区域
      if(!_con.is(e.target) && _con.has(e.target).length === 0){
           $(".sidebar").animate({right:"-72%"});
           $(".modelBlack").fadeOut("fast");
      }
      $(".footer_fixed").show();
    });

功能說明:

  • 先點選【目錄】,開啟右側目錄;

  • #再點選【空白區域】,右側目錄關閉;

#問題:

問題一:點擊空白區域無法關閉右側目錄;
問題二:如果不使用$(document).off("click"); 點擊目錄按鈕時,會同時觸發下面兩個事件,右側欄會不停的開啟/關閉;

##
習慣沉默
習慣沉默

全部回覆(4)
滿天的星座

綁定元素錯誤了,要綁定蒙版就可以了

  //点击空白区域关闭
    $(".modelBlack").click(function(e){
      var _con = $('.sidebar');   // 设置目标区域
      if(!_con.is(e.target) && _con.has(e.target).length === 0){
           $(".sidebar").animate({right:"-72%"});
           $(".modelBlack").fadeOut("fast");
           // console.log(2);
            $(".footer_fixed").show();
      }
    });
phpcn_u1582

雷雷

曾经蜡笔没有小新

//顯示側邊欄

$("#drap").click(function(){
    $(".footer_fixed").hide();
    $(".sidebar").animate({right:"0%"});
    $(".modelBlack").fadeIn("fast");
    //点击空白区域关闭
    $(document).off("click").on("click",function(e){
       var _con = $('.sidebar');   // 设置目标区域
       if(!_con.is(e.target) && _con.has(e.target).length === 0){
           $(".sidebar").animate({right:"-72%"});
           $(".modelBlack").fadeOut("fast");
      }
      $(".footer_fixed").show();
    });
})
巴扎黑

類似的問題

請參考採納資訊

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板