CODEWITHSUNDEEP
jquery-mobile
Casey
Casey

Reputation: 184

jQuery Mobile 1.4 header issue

I just upgraded my project to JQM 1.4 and it looks like the header is ignoring the data-role="none" attribute if used on an tag in the header. This worked in JQM 1.3.2.

Please see the jsfiddle and code below

http://jsfiddle.net/caseylmanus/VL4HX/21/

<div data-role="page" id="p1">
<div data-role="header" data-theme='b'>
    <a href="#p1" data-role="none"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Back.svg/120px-Back.svg.png" style="height:15px"/></a>
     <h1>Header</h1>
</div>
<div data-role="content" data-theme='a'>
    Some content here
</div>
<div data-role="footer" data-position='fixed'>
     <h4>Footer</h4>

</div>

Upvotes: 1

Views: 544

Answers (1)

Omar
Omar

Reputation: 31732

This is a bug in jQuery Mobile 1.4 and will be fixed on 1.4.1.

To fix this until an official fix is released, do the following.

On mobileinit, set .keepNative option to any custom class. i.e. .native. Add this class to any element you dont want jQM to enhance.

<script src="jquery-1.10.2.min.js"></script>
<script>
  $(document).on("mobileinit", function() {
    $.mobile.keepNative = ".native";
  });
</script>
<script src="jquery.mobile-1.4.0.js"></script>

HTML

<div data-role="header" data-theme='b'>
  <a href="#p1" class="native">
   <img src="120px-Back.svg.png" style="height:15px"/>
  </a>
  <h1>Header</h1>
</div>

Demo

Upvotes: 1

Related Questions