title: jQuery click mobile problems (slider)
body: <p>I have coded a small script for scrolling in a vertical gallery on mobile devices – in browser everything works fine, but I can't make it work on my smartphone. What am I doing wrong?</p>
  
  <p>Thats my query:</p>
  
  <pre><code>jQuery( '.single-cinema-cat .next' ).on('click touchstart', function () {
      alert("The btn was clicked.");
      if( jQuery( this ).hasClass( 'disabled' ) )
          return;
      jQuery( this ).addClass( 'disabled' );
  
      var $el = jQuery( this );
      if( jQuery( window ).innerWidth() &gt;= 970 )
          scrollVertical_next( $el );
      else
          scrollHorizontal_next( $el );
  });
  </code></pre>
  
  <p>the click element is a span-element in my html markup – could this be a problem? screenshot of my markup: <a href="https://picload.org/image/ralwaarg/jquerymobile.png" rel="nofollow noreferrer">https://picload.org/image/ralwaarg/jquerymobile.png</a></p>
  
  <p>please save me for further headaches :-)</p>
  
  <p><strong><em>scrollVertical_next</em></strong></p>
  
  <pre><code>function scrollVertical_next($el) {
  var $wrapper = $el.closest('.single-cinema-cat').find('.inner');
  var margin = parseInt($wrapper.find('article').css('margin-bottom')) + parseInt($wrapper.find('article').css('margin-top'));
  var current_height = parseInt($wrapper.find('ul').css('top'));
  var single_height = $wrapper.find('article').outerHeight() + margin;
  var target_height = current_height - single_height;
  var total_height = $wrapper.find('ul').innerHeight();
  var stopper_height = -1 * total_height + 4 * single_height;
  if (target_height &lt; stopper_height)
      return;
  $wrapper.find('ul').animate({
      'top': target_height + 'px'
  }, 250, 'swing', function() {
      if (target_height &gt; stopper_height)
          $el.removeClass('disabled');
      $el.closest('.single-cinema-cat').find('.prev').removeClass('disabled');
  });
  </code></pre>
  
  <p>}</p>
  
  <p><strong><em>scrollHorizontal_next</em></strong></p>
  
  <pre><code>function scrollHorizontal_next($el) {
  var $wrapper = $el.closest('.single-cinema-cat').find('.inner');
  var margin = parseInt($wrapper.find('article').css('margin-bottom')) + parseInt($wrapper.find('article').css('margin-top'));
  var current_height = parseInt($wrapper.find('ul').css('top'));
  var single_height = $wrapper.find('article').outerHeight() + margin;
  var target_height = current_height - single_height;
  
  var total_height = $wrapper.find('ul').innerHeight();
  var stopper_height = -1 * total_height + 1 * single_height;
  if (target_height &lt; stopper_height)
      return;
  
  $wrapper.find('ul').animate({
      'top': target_height + 'px'
  }, 250, 'swing', function() {
      if (target_height &gt; stopper_height)
          $el.removeClass('disabled');
      $el.closest('.single-cinema-cat').find('.prev').removeClass('disabled');
  });
  </code></pre>
  
  <p>}</p>