data-enhance="false" not escaping dynamic divs

data-enhance="false" not escaping dynamic divs

Hi  I am using a jquery library to create a flipbook animation, however when I try to escape the flipbook I have some issues, the dynamic content is still styled even though it is inside a data-enhance="false" div, here is the jsfiddle:  http://jsfiddle.net/adamsurfari/DpQQV/ the issue is that inside my div:

  2. <div class="turn-page-wrapper ui-page ui-body-c" tabindex="0"
  3.          style="position: absolute; overflow: hidden; width: 200px; height: 300px; top: 0px; right: 0px; left: auto; bottom: auto; z-index: 8;">
  4.         <div style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: auto; width: 361px; height: 361px; -webkit-transform-origin: 0% 100%;">
  5.             <div class="hard turn-page p1"
  6.                  style="width: 200px; height: 300px; position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; -webkit-transform-origin: 0% 100%;">
  7.                 Turn.js
  8.             </div>
  9.         </div>
  10.         <div style="top: 0px; left: 0px; overflow: hidden; z-index: 1; width: 200px; height: 300px; background-image: -webkit-gradient(linear, 100% 100%, 100% 100%, color-stop(0.8, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.298039)), to(rgba(0, 0, 0, 0))); display: none;"></div>
  11.     </div>
  12.     <div style="pointer-events: none; display: none; position: absolute; top: -193.1875px; left: -15px; overflow: visible; z-index: auto;">
  13.         <div style="position: absolute; top: 193.1875px; left: 215px; overflow: hidden; z-index: 8; display: none; width: 361px; height: 361px; -webkit-transform-origin: 0% 100%; -webkit-transform: translate3d(200px, -61px, 0px) rotate(-90deg);">
  14.             <div style="position: absolute; top: auto; left: 0px; overflow: visible; z-index: auto; width: 200px; height: 300px; right: auto; bottom: 0px; -webkit-transform-origin: 0% 100%; -webkit-transform: rotate(90deg) translate3d(0px, 300px, 0px);">
  15.                 <div style="cursor: default; width: 300px; height: 200px; -webkit-transform-origin: 0% 0%; -webkit-transform: rotate(-90deg);">
  16.                     <div style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: 1; width: 300px; height: 200px; background-image: -webkit-gradient(linear, 0% 0%, 0% 0%, from(rgba(0, 0, 0, 0)), color-stop(0.8, rgba(0, 0, 0, 0.2)), to(rgba(255, 255, 255, 0.2)));"></div>
  17.                 </div>
  18.             </div>
  19.         </div>
  20.     </div>
  21.     <div class="turn-page-wrapper ui-page ui-body-c" tabindex="0"
  22.          style="position: absolute; overflow: hidden; width: 200px; height: 300px; top: 0px; left: 0px; right: auto; bottom: auto; z-index: 0; display: none;">
  23.         <div class="hard turn-page p2" style="width: 200px; height: 300px; -webkit-transform-origin: 0% 0%;"></div>
  24.     </div>

As you can see there is still styling, this is what is supposed to look like:

  2. <div data-enhance="false" id="flipbook"
  3.      style="position: relative; width: 1024px; height: 360px; -webkit-transform: translate3d(0px, 0px, 0px);">
  4.     <div class="turn-page-wrapper" page="1"
  5.          style="position: absolute; overflow: hidden; width: 512px; height: 360px; top: 0px; right: 0px; left: auto; bottom: auto; z-index: 56;">
  6.         <div style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: auto; width: 626px; height: 626px; -webkit-transform-origin: 0% 100%;">
  7.             <div data-enhance="false" class="turn-page p1"
  8.                  style="width: 512px; height: 360px; position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; -webkit-transform-origin: 0% 100%;">
  9.                 <img width="512px" src="filesystem:http://localhost:8080/persistent/LEGO/CATALOGO%202013_001.jpg"></div>
  10.         </div>
  11.         <div style="top: 0px; left: 0px; overflow: hidden; z-index: 1; width: 512px; height: 360px; background-image: -webkit-gradient(linear, 100% 100%, 100% 100%, color-stop(0.8, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.298039)), to(rgba(0, 0, 0, 0))); display: none;"></div>
  12.     </div>
  13.     <div style="pointer-events: none; position: absolute; top: -50px; left: -8px; overflow: visible; z-index: auto; display: none;">
  14.         <div style="position: absolute; top: 50px; left: 520px; overflow: hidden; z-index: 56; width: 626px; height: 626px; -webkit-transform-origin: 0% 100%; -webkit-transform: translate3d(512px, -266px, 0px) rotate(-90deg); display: none;">
  15.             <div style="position: absolute; top: auto; left: 0px; overflow: visible; z-index: auto; width: 512px; height: 360px; right: auto; bottom: 0px; -webkit-transform-origin: 0% 100%; -webkit-transform: rotate(90deg) translate3d(0px, 360px, 0px);">
  16.                 <div style="cursor: default; width: 360px; height: 512px; -webkit-transform-origin: 0% 0%; -webkit-transform: rotate(-90deg);">
  17.                     <div data-enhance="false" class="turn-page p2"
  18.                          style="width: 512px; height: 360px; -webkit-transform-origin: 0% 0%;">
  19.                         <div class="turn-page p4" style="width: 200px; height: 300px;"> Page 2</div>
  20.                     </div>
  21.                     <div style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: 1; width: 360px; height: 512px; background-image: -webkit-gradient(linear, 0% 0%, 0% 0%, from(rgba(0, 0, 0, 0)), color-stop(0.8, rgba(0, 0, 0, 0.2)), to(rgba(255, 255, 255, 0.2)));"></div>
  22.                 </div>
  23.             </div>
  24.         </div>
  25.     </div>
  26.     <div class="turn-page-wrapper" page="2"
  27.          style="position: absolute; overflow: hidden; width: 512px; height: 360px; top: 0px; left: 0px; right: auto; bottom: auto; z-index: 0; display: none;"></div>
  28.     <div class="turn-page-wrapper" page="3"
  29.          style="position: absolute; overflow: hidden; width: 512px; height: 360px; top: 0px; right: 0px; left: auto; bottom: auto; z-index: 55;">
  30.         <div data-enhance="false" class="turn-page p3" style="width: 512px; height: 360px;">
  31.             <div class="turn-page p4" style="width: 200px; height: 300px;"> Page 3</div>
  32.         </div>

As is possible to see jqueryMobile still messes around with the code that is inside the div:

For instance: 

  1.     <div class="turn-page-wrapper" page="1"

is transformed into:

  1.     <div class="turn-page-wrapper ui-page ui-body-c" tabindex="0"

How can I have the same return, without having jquery mobile overwrite the code?

Thanks!