2013-01-10 39 views
0

新元素我這裏有一個小提琴:http://jsfiddle.net/marktait/YETGp/jQuery Mobile的格式在DOM

它的設計使用jQueryMobile - 這是當它第一次顯示細膩。但是當我點擊添加房間按鈕時,它會添加一個新行,但jQuery Mobile CSS不會應用到新行。

無論如何將格式添加到DOM中的新元素?

的HTML是:

<div class='liveExample'> 

    <table width='100%' border="1"> 
     <thead> 
      <tr> 
       <th width='25%'>Room Type</th> 
        <th width='25%'>Occs</th> 
       <th class='price' width='15%'>Price</th> 
       <th class='quantity' width='10%'>Quantity</th> 
       <th class='price' width='15%'>Subtotal</th> 
       <th width='10%'> </th> 
      </tr> 
     </thead> 
     <tbody data-bind='foreach: lines'> 
      <tr> 
       <td> 
        <select data-bind='options: $root.RoomCategories, optionsText: "TypeName", optionsCaption: "Select...", value: category'> </select> 
       </td> 
       <td data-bind="with: category"> 
        <select data-bind='options: Occs, optionsText: "occ", optionsCaption: "Select...", value: $parent.product'> </select> 
       </td> 
       <td class='price' data-bind='with: product'> 

<span data-bind='text: formatCurrency(ratetocharge)'> </span> 
       </td> 
       <td class='quantity' data-bind="with: category"> 
        <select data-bind="visible: $parent.product, options: ko.utils.range(0, TypeCount), value: $parent.quantity"></select> 
       </td> 
       <td class='price'> 
        <span data-bind='visible: product, text: formatCurrency(subtotal())' > </span> 
       </td> 
       <td> 
        <a href='#' data-bind='click: $parent.removeLine'>Remove</a> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
    <p class='grandTotal'> 
     Total value: <span data-bind='text: formatCurrency(grandTotal())'> </span> 
    </p> 
    <button data-bind='click: addLine'>Add room</button> 
    <button data-bind='click: save'>Submit booking</button> 

</div> 

添加一個新行淘汰賽是:

// Operations 
self.addLine = function() { 
self.lines.push(new CartLine()) 
}; 

感謝您的幫助,

馬克

回答

3

你應該看看在documentation here

將內容添加到頁面時,需要通知框架。在表格行的情況下(從你的內容中猜出),你需要觸發它的創建事件。

$('.line_selector').trigger('create'); 

不幸的是,我沒有淘汰賽的經驗,所以我不能指導你在哪裏打這個電話。

+0

非常感謝@jaudette - 我已經用修正更新了小提琴:http://jsfiddle.net/marktait/YETGp/3/ - 乾杯,馬克 – Mark