1

だから私は次のhtml / jsコードを持っています.

HTML (バインディングにノックアウトを使用して、colorbox-overlay 内に表示):

<li>
    <select id="selectPriceType" class="tsel" name="selectPriceType" data-bind="value: priceSetting">
        <option value="hide">Keinen Preis anzeigen</option>
        <option value="line">Preis pro Menülinie</option>
        <option value="calc">Preis pro Menü</option>
    </select>
    <div class="price-type"></div>
    <div class="price-type">
        <div class="clear"></div>
        <div class="menu-price-list" data-bind="foreach: menuLinePrices">
            <div class="menu-line-price">
                <label data-bind="text: text"></label>
                <span>€&lt;/span> <input type="text" data-bind="value: price" name="inputpriceline#12776" id="inputpriceline#12776" />
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>

    </div>
    <div class="price-type">
        <div class="price-space">
            <fieldset>
                <legend>Ausgabepreis:</legend>
                <dl>
                    <dt><label class="rb" data-bind="css:{ checked : surcharge() == 'no'}">Ohne Aufschlag<input type="radio" value="no" class="styled-input" data-bind="checked: surcharge" name="surcharge" id="rbtnSurchargeNone" /></label></dt>
                   ...
                </dl>
            </fieldset>
            <fieldset>
                <legend>MwSt:</legend>
                <label class="rb" data-bind="css:{ checked : vat() == '0'}">keine Angabe<input type="radio" class="styled-input" data-bind="checked: vat" value="0" name="vat"></label>
               ...
            </fieldset>
        </div>
    </div>
</li>

私の JS-Inithandler は、ノックアウトで定義された変数を探し、オプション ("hide"、"line"、"calc") の値に基づいて html 要素を表示/非表示にする必要があります。

pricetype = {
            init: function () {
                $('#selectPriceType').change(function () {
                    $(this).siblings('.price-type').hide().eq(this.selectedIndex).show();
                    $.colorbox.resize();
                }).change();
            }
        }

私のdocument.readyでは次のように呼び出されます：

$(document).ready(function () {
            initHelpContents();
            InitPrintCockpit(); //here my variable is set to 'calc'
            printCockpitPageModel.menuplanid('###MenuPlanId###');
            $("select").transformSelect();
            $("a.btn-generic").colorbox({ inline: true, width: "905px", close: "" });
            accordion.init();
            footerNav.init();
            pricetype.init();

            changeSettingHint.init();

            $('.reset').click(function () {
                $('#cboxClose').click();
            });

            // $(document).ready() may execute before css styles are applied and wrong font-family or font-size may result in wrong scrollHeight.
            $(window).load(function () {
                $('#Menue').find('textarea').change();
            })
        });

前述のように、デスクトップ ブラウザーではすべて正常に動作します。しかし、これをモバイルブラウザー (ipad / 最新の safari および android4 / chrome 32 および組み込みの「ブラウザー」でテスト済み) で開くと、奇妙な動作が発生します。「init」部分全体が実行されないようです。ノックアウトで設定したものだけでなく、すべての div が表示されます。Chrome デバッガー ツールで検索しようとしましたが、コンソールに何も出力されません。に何が入っているか調べてみましたがthis.selectedIndex、これも結構です。次に$("select").transformSelect();、ドキュメントの準備ができてから削除しようとしましたが、「ta-daa」は魅力のように機能するようです。

私はここで fancyforms 1.4.2 ( http://plugins.jquery.com/Fancyform/ ) を使用していますが、グーグルで検索しても答えが得られませんでした。今のアイデアの。

4

0 に答える 0