javascript - jquery Wenn Sie zuerst „off“ verwenden, um die Bindung eines Ereignisses aufzuheben, und dann „on“, um das Ereignis zu binden, funktioniert das nicht?

Question

Klicken Sie hier, um die Demo der mobilen Version anzuzeigen

Haupt-JS-Code

    //显示侧边栏
    $("#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();
    });

Funktionsbeschreibung:

• Klicken Sie zunächst auf [Verzeichnis], um das Verzeichnis auf der rechten Seite zu öffnen;

Klicken Sie erneut auf [leeren Bereich], um das Verzeichnis auf der rechten Seite zu schließen

• Frage:

Problem 1: Durch Klicken auf den leeren Bereich kann das Verzeichnis auf der rechten Seite nicht geschlossen werden.

Problem 2: Wenn Sie nicht $(document).off("click"); verwenden, treten die folgenden zwei Ereignisse auf wird gleichzeitig ausgelöst, die rechte Spalte öffnet/schließt sich weiter

Answer 1

绑定元素错误了，要绑定蒙版就可以了

  //点击空白区域关闭
    $(".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();
      }
    });

Answer 2

$("#drap").on("click",function(e){
     e.stopPropagation();//阻止事件冒泡
     //巴拉巴拉
});

$(document).on("click",function(){
    //balabala
});

Answer 3

//显示侧边栏

$("#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();
    });
})

Answer 4

类似的问题

请参考采纳信息