jQuery tabs not working in mobile - custom code

Question

I have just noticed that on mobile and when resized to mobile my tabs are not clicking and changing and wondering if anyone can see why?

I created a fiddle here: https://jsfiddle.net/a6k70p0L/2/

Works fine in desktop view, but when resized the click events does seem to fire and change.

JS:

$(document).ready(function() {

    var originalTabs = $('.originalTabs').html();

    function clearTabs(){
      $('.originalTabs').html(originalTabs);
    }

    //clearTabs();
    //desktopTabs(); 

    function desktopTabs(){
      clearTabs();

      // cretate tabs for desktop
      var headers = $("#tab_description h6");

      $('#tab_description h6').each(function(i){      
        $(this).nextUntil("h6").andSelf().wrapAll('<div class="tab" id="tab-'+i+'"/>');
      });

      for( var i = 0; i < headers.length; i++ ) {
        $('.tabs').append('<li class=""><a href="#tab-'+i+'">'+headers[i].innerHTML+'</a></li>');
      }

      $('ul.tabs').each(function(){
        var active, content, links = $(this).find('a');
        var listitem = $(this).find('li');
        active = listitem.first().addClass('active');
        content = $(active.attr('href'));
        $('.tab').hide();
        $(this).find('a').click(function(e){
          $('.tab').hide();
          $('ul.tabs li').removeClass('active');
          content.hide();
          active = $(this);
          content = $($(this).attr('href'));
          active.parent().addClass('active');
          content.show();
          return false;
        });
      });

      headers.remove(); // remove headers from description  
      $('#tab-0').show(); // show the first tab
    }

    function mobileTabs(){
      clearTabs();

      //alert("loaded mobile");

      var headers = $("#tab_description h6");

      $(headers).each(function(i) {
        $(this).append('<a href="#accordion_'+(i+1)+'" id="accordion_'+(i+1)+'"></a>');
        //$(this).nextUntil("h6").andSelf().wrapAll('<div class="aTab" id="tab-'+i+'"/>');
      });

      $('#tab_description h6').first().trigger('click').addClass("active");
      $('#tab_description h6').first().nextUntil("h6").show();
    }

    var tabClick = function() {

        //alert("clicked");
        var accordionContent = $('#tab_description p, #tab_description ul, #tab_description table, #tab_description iframe, #tab_description div');

        $('#tab_description h6').removeClass("active");
        if (!$(this).hasClass("active")){
          $(this).addClass("active");
        }

        // Check if current accordion item is open
        var isOpen = $(this).next().is(":visible");

        // Hide all accordion items
        accordionContent.hide();

        // Open accordion item if previously closed
        if (!isOpen) {
          $(this).nextUntil('h6').show();
        }

        // Disabled to stop on mobile auto scrolling down to product description when clicking through...
        $('html, body').animate({
          scrollTop: $(this).offset().top - 15
        }, 2000);

        return false;
    }

    //bind to resize
    $(window).resize( function() {
      if(isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches){
        desktopTabs();
        $('#tab_description h6').on("click, touchstart", tabClick);

      } else if(isMobilePortraitOnly.matches || isTabletPortraitOnly.matches){
        mobileTabs(); 
        $('#tab_description h6').on("click, touchstart", tabClick);

      } else if(isDesktop) {
        desktopTabs(); 
      }
    });

    //check for the orientation event and bind accordingly
    window.addEventListener("orientationchange", function() {
      if(isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches){
        desktopTabs();
        $('#tab_description h6').on("click, touchstart", tabClick);

      } else if(isMobilePortraitOnly.matches || isTabletPortraitOnly.matches){
        mobileTabs(); 
        $('#tab_description h6').on("click, touchstart", tabClick);

      } else if(isDesktop) {
        desktopTabs(); 
      }
    }, false);

    if(isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches){
      //alert("Mobile / Tablet (Portrait)");
      desktopTabs();
      $('#tab_description h6').on("click, touchstart", tabClick);

    //console.log(originalTabs);
    } else if(isMobilePortraitOnly.matches || isTabletPortraitOnly.matches){
      //alert("Mobile / Tablet (Portrait)");
      mobileTabs(); 
      $('#tab_description h6').on("click, touchstart", tabClick);

    } else if(isDesktop) {
      //alert("Desktop");
      desktopTabs(); 
    }

  });

Answer 1

Wrap your $('ul.tabs').each... in function and call the function when you have done all your appending of a/h6 tags in mobile. Or call your appending functions before the each statement.

The each statement fires and applies to everything that is currently available in the DOM, as your appending function hasn't started yet...the each statement doesn't know it's there. Then your appending stuff happens in your mobile functions and the each statement doesn't know it exists(as it is fired before the mobile functions).

Edit - Working Answer

Check the updated fiddle here: https://jsfiddle.net/a6k70p0L/6/

I've mentioned my changes in the comment below.

Answer 2

When you are using append() with an event like onclick() you should use delegate()jQuery function.

Example :

$("body").delegate('.class', 'click' ,function()
{
//do something
});

It is very helpfull. You can read the cause of this usage in other post on Stackoverflow.