0

jQuery Mobile の PageShow イベントを使用して、特定の入力要素の幅を設定しています。ページを直接 (つまり、URL を介して) ロードすると、すべてが期待どおりに機能します。

標準の ajax ナビゲーション システム (つまり、アプリ内リンク) を介してページを読み込むと、「hello」アラートと「span.add-on」の正しい幅が表示されますが、「div.content-padd」は要素の幅がゼロになる? 「div.content-padd」は、ページ内の他のすべての要素のコンテナ要素であり、パディングなどを提供します。すべての JS は Rails レイアウト テンプレートにロードされます。

ここで何が起こっているのかわかりません。私のコードは以下の通りです：

$(document).bind('pageshow', function() {

alert('hello')

    $('.add-on').addClass('ui-corner-all');

    //Set the width of the input following the appends or prepends to the remaining space
    var containerWidth = $('div.content-padd').width();
    console.log('container width:' + containerWidth);

    var appendsAndPrepends = '.input-prepend, .input-append';
    $(appendsAndPrepends).each(function () {
        var remainingSpace = containerWidth - $(this).find('span.add-on').outerWidth();
        console.log('span width' + $(this).find('span.add-on').outerWidth());

        $(this).find('div.ui-input-text').outerWidth(remainingSpace);
    });

});
4

1 に答える 1

1

これは大雑把な推測ですが、ロジックを変更する必要があります。あなたが今言ったことから、同じ.content-padddivを持つページがいくつかあると思います。この場合、jQuery Mobile と JavaScript がどのように機能するかを理解する必要があります。jQuery Mobile は ajax を使用してコンテンツを DOM に読み込みます。1 つ以上のページをロードできます。

同じ DIV ID を持つ複数のページがある場合、それにアクセスしようとすると、その ID を持つ DOM で見つかった最初の要素にアクセスしますが、通常は必要な DIV ではありません。

正しい DIV にアクセスするには、アクティブ ページと呼ばれる jQuery Mobile セレクターを使用する必要があります。

$.mobile.activePage

そして、コードをテストしないと、次のようになります。

$(document).bind('pageshow', function() {

    alert('hello')

    $.mobile.activePage.find('.add-on').addClass('ui-corner-all');

    //Set the width of the input following the appends or prepends to the remaining space
    var containerWidth = $.mobile.activePage.find('div.content-padd').width();
    console.log('container width:' + containerWidth);

    var appendsAndPrepends = '.input-prepend, .input-append';
    $.mobile.activePage.find(appendsAndPrepends).each(function () {
        var remainingSpace = containerWidth - $(this).find('span.add-on').outerWidth();
        console.log('span width' + $(this).find('span.add-on').outerWidth());

        $(this).find('div.ui-input-text').outerWidth(remainingSpace);
    });

});

このコードが正しく機能しているかどうかはわかりませんが、要点を理解する必要があると思います。

于 2013-05-31T12:54:55.030 に答える