title: How to reinitialize HammerJS on resize event?
body: <p>How do I reinitialize HammerJS on resize event? </p>
  
  <p>My problem is when I trigger the resize event the Selectors reset, and using jQuery for matching a container $('.container') will return an index of 0 all the time.. on document ready it worked before.</p>
  
  <p>The $('.container') appears more than once so it should increment on swipe event.</p>
  
  <p>Anyone got any ideas ?</p>
  
  <pre><code>$(document).ready(function() {
      mobileCalculus(animation);
      swipeActions( $('.home-element-wrapper'), $('.home').width());
  
      $(window).on('resize', function() {
          mobileCalculus(animation);
      });
  });
  
  
  function swipeActions(parent, offset) {
      var curInd = 0;
      var theThumb = $('.thumb');
      var myElement = document.getElementById('main-swipe');
      var max = theThumb.length - 1;
  
      // create a simple instance
      // by default, it only adds horizontal recognizers
      var mc = new Hammer(myElement);
  
      // listen to events...
      mc.on("swipeleft", function(ev) {
  
          curInd = $('.thumb.active').index() + 1;
          if (curInd &gt; max) {
              curInd = max;
          }
          var newML = offset * curInd;
          theThumb.removeClass('active');
          theThumb.eq(curInd).addClass('active');
          console.log($('.thumb.active').index() + 1);
          parent.css({
              'margin-left': '-'+newML+'px'
          });
      });
      mc.on("swiperight", function(ev) {
          curInd = $('.thumb.active').index() - 1;
          if (curInd &lt; 0) {
              curInd = 0;
          }
          var newML = offset * curInd;
          theThumb.removeClass('active');
          theThumb.eq(curInd).addClass('active');
          parent.css({
              'margin-left': '-'+newML+'px'
          });
      });
  
  }
  </code></pre>
  
  <p>For example jquery has a function called <code>.off</code> which deactivates the event after which we can put a new event on the selector.</p>
  
  <pre><code>$('element').off('swiperight').on('swiperight')
  </code></pre>