DOM中新元素的jQuery Mobile格式 [英] jQuery Mobile Formatting for new elements in DOM

问题描述

我在这里有一个小提琴: http://jsfiddle.net/marktait/YETGp/

I have a fiddle here: http://jsfiddle.net/marktait/YETGp/

它设计为使用jQueryMobile-第一次显示时很好.但是，当我单击添加房间"按钮时，它会添加新行，但是jQuery Mobile CSS不会应用于新行.

It is designed to use jQueryMobile - which is fine when it first displays. But when I click on the Add Room button, it adds a new line, but the jQuery Mobile CSS isn't applied to the new line.

是否有必要将格式添加到DOM中的新元素?

Is there anyway of adding the formatting to new elements in the 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>

添加新行的KnockOut是:

The KnockOut for adding a new line is:

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

感谢您的帮助，

标记

推荐答案

您应该查看将内容添加到页面时，需要通知框架.对于表行(根据您的内容猜测)，您需要在其上触发create事件.

When you add content to your pages, you need to notify the framework. In the cases of table rows, (guessed from you content), you would need to trigger the create event on it.

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

不幸的是，我没有淘汰赛的经验，所以我无法指导您在何处拨打此电话.

Unfortunately, i have no experience with knockout, so i cannot guide you as to where this call should be made.

这篇关于DOM中新元素的jQuery Mobile格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！