On two of my pages I have the following code:
$('#tabs').mobiscroll().nav({
theme: 'ios',
type: 'tab',
onItemTap: function (event, inst) {
$('.md-tab').removeClass('md-tab-sel');
$('.' + $(event.target).data('tab')).addClass('md-tab-sel');
}
});
And it works great in the sense that it creates the tabs along the top. However, on iOS (and only iOS) it breaks any javascript I’m calling from the header. In my case I have a clickable hamburger menu, title bar and reload button. None of which work after running this code. There are no errors or anything but rather it’s like there’s an overlay over the header bar.
I should point out that I’m also using jQuery Mobile which wants me to use the following html:
<div data-role='header' style='border-bottom:none'>
<?php
include("common/header.php");
?>
</div>
This is not a problem on Windows or Android. Any idea what could be causing this and how to get around it?