jquery html（）;无按钮样式

Question

在jquery mobile中，我尝试用一​​些按钮替换我的标题。我使用jquery的html（）函数来完成它。

的问题是从按钮的图标会丢失，而且看起来不像原来的div ..

我怎样才能解决呢？ Fiddle

HTML：

<div data-role="page" id="index"> 
     <div id="header" data-theme="b" data-role="header"> 
      <h1>replace this with some buttons</h1> 
     </div> 

     <div data-role="content"> 
      <div id="map"></div> 
     </div> 
</div> 

<!-- div to instert--> 
<span id="downBut"><center> 
    <button type="submit" id="down" style="width: 110px" data-mini="true" data-theme="a" data-transition="pop" data-icon="carat-d">Download</button> 
    <button type="submit" id="down" style="width: 110px" data-mini="true" data-theme="a" data-transition="pop" data-icon="delete">cancel</button> 
</center></span> 

的Javascript：

// make the from header buttons 
$("#header").html($("#downBut")); 

的CSS：

.ui-header { 
    height: 40px; 
} 

.ui-content { 
    position: absolute; 
    top: 40px; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    padding: 0 !important; 
    margin: 0; 
} 
h1 { 
    margin: 0 auto; 
} 

Answer 1

你必须拨打create为header股利用按钮替换html后。

$('#header').html($('#downBut')); 
$('#header').trigger('create'); 

Working JSFiddle