javascript - jquery window width issue -

in demo if click inputs in dark blue area (numarani gonder) gonna see nothing happend if click on responsive mode (less 768px) u gonna see modal has been opening it's okey thing want if u click again on dekstop mode black element has been opening

i'm using bootstrap modal , js codes

 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');        };      }); 

cause:

notice happens if hit case window < 768 , resize larger. if start large fine.

this because not unbinding event.

solution:

 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');        };      });