jQuery Mobile Formatting for new elements in DOM

问题

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

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.

Is there anyway of adding the formatting to new elements in the DOM?

The HTML is:

<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>

The KnockOut for adding a new line is:

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

Thanks for any help,

Mark

回答1:

You should have a look at documentation here.

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.

来源：https://stackoverflow.com/questions/14256674/jquery-mobile-formatting-for-new-elements-in-dom

标签

jquery

css

jquery-mobile

knockout.js