0

ここにフィドルがあります：http://jsfiddle.net/marktait/YETGp/

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())
};

助けてくれてありがとう、

マーク

4

1 に答える 1

3

こちらのドキュメントをご覧ください。

ページにコンテンツを追加するときは、フレームワークに通知する必要があります。テーブル行の場合（コンテンツから推測される）、テーブル行でcreateイベントをトリガーする必要があります。

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

残念ながら、私はノックアウトの経験がないので、この電話をどこで行うべきかについてあなたを案内することはできません。

于 2013-01-10T11:26:32.220 に答える