ui.tabs has problem in a page created by pagecontainer(“change”);

It is fine when the page refreshes or move into the page with data-ajax="false" . But a page with tab doesn't show correctly when a page is created by a link with data-ajax="true" or pagecontainer("change");

I investigated the reason and found out that ui.tabs checks all anchors if they are local or not by function isLocal( anchor ). But location.href is not updated yet as it is done when the change is completed.

I am new to jquery mobile. Please let me know if I use tab widget incorrectly.

Please check below case. Is there a way to attach files into this issue tracker?

index.html


<!DOCTYPE html>
<html class="ui-mobile">

<head>

<meta charset="utf-8" http-equiv="Content-Type" name="viewport" content="width=device-width, initial-scale=1" > 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<script src="http://code.jquery.com/jquery-2.1.3.min.js">

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">

 <title>Insert title here</title>

</head>

<body>

<div data-role="page" data-theme="a" >

<div data-role="content">

<!-- 

<a href="tab.html" data-transition="fade" data-role="button">tab</a>

 -->

 <input type="button" id=tabbutton value=tab />

 <script type="text/javascript">

$("#tabbutton").bind ("click", function (event)

{

$("body").pagecontainer("change", "tab.html");

console.log("index");

   return false;

});

 </script>

</div>

</div>

</body>

</html>

tab.html



<!DOCTYPE html>

<html class="ui-mobile">

<head>

<meta charset="utf-8" http-equiv="Content-Type" name="viewport" content="width=device-width, initial-scale=1" > 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<script src="http://code.jquery.com/jquery-2.1.3.min.js">

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">

<title>Insert title here</title>

</head>

<body>

<div data-role="page" data-theme="a" >

<div data-role="content">

<div data-role="tabs" id="tabs" >

  <div id="navBarWithAudio" data-role="navbar" >

```
  
  textInput
  audioRecognition
  textRecognition

```

  </div>

<div >

</div>

  <div id="textInput" data-role="content">

```
textInput
```

  </div>

  <div id="audioInput" data-role="content">

```
audioInput
```

  </div>

  <div id="imageInput" data-role="content">

```
imageInput
```

  </div>

</div>

</div>

</div>

</body>

</html>

jquery-archive / jquery-mobile

ui.tabs has problem in a page created by pagecontainer(“change”); #7908