javascript - jquery窗口宽度问题

Question

in this demo如果你点击深蓝色区域(NUMARANI GONDER)中的输入，你会看到什么也没有发生，但如果你点击响应模式(小于 768px)，你会看到模态已打开，没关系，这是我想要的东西，但如果你再次点击在桌面模式下黑色元素已打开

我正在使用 Bootstrap 模式和我的 JS 代码

 var $window = $(window),
     $nogonder = $('.add-modal');
     $(window).on('resize', function () {
        if ($window.width() < 768) {
          $nogonder.on("click",function(){
            $("#parallaxPopup").modal('show');
          })

       }else{
        $("#parallaxPopup").modal('hide');
        $("#rezervasyonPopup").modal('hide');
        $("#popupCheckin").modal('hide');
       };
     });

Answer 1

原因:

请注意，只有在窗口 < 768 的情况下才会发生这种情况，然后将其调整为更大。如果你一开始就很大，那就没问题。

这是因为您没有解除事件绑定(bind)。

解决方案:

 var $window = $(window),
     $nogonder = $('.add-modal');
     $(window).on('resize', function () {
        if ($window.width() < 768) {
          $nogonder.on("click",function(){
            $("#parallaxPopup").modal('show');
          })

       }else{
        $nogonder.off("click");
        $("#parallaxPopup").modal('hide');
        $("#rezervasyonPopup").modal('hide');
        $("#popupCheckin").modal('hide');
       };
     });