web-dev-qa-db-ja.com

jQuery Mobileトリガー（ '作成'）コマンドが機能しない

今夜はJQuery Mobileが泣き叫んでいます。アプリで特定の要素を繰り返さないようにカスタムコントロールを構築しようとしています。具体的には、HTMLファイルに次のものが含まれています。

<div id="custom-header" data-role="header" data-position="inline" data-theme="f">
    <a href="index.html" data-icon="back" style="margin-top:5px" data-theme="b">Back</a>
    <div style="text-align: center; padding-top: 5px; padding-bottom: 3px"><img src="../images/logo.png" ></div>
    <a href="index.html" data-icon="home" style="margin-top:5px" data-theme="b">Home</a>
</div>

私のメインファイルでは、基本的に次のようにしています。

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>        
<div data-role="page" id="test-console" data-theme="m">

    <div id="me-header"></div>

    <script>

        $.get('header.html', function (retData) {
            $('me-header').html(retData).trigger('create');
        });

     </script>

</div>

ここに問題があります-ヘッダーが、header.htmlのコンテンツを直接JQMページに貼り付けた場合と同じようにレンダリングされません。これは、trigger（ 'create'）が何も実行していないように感じられます。

何か案は？私は約3時間焼きました http://jquerymobiledictionary.pl/faq.html のようなチュートリアルは適用されていないようです。

jquerydynamicmobiletriggerscontrols
21
Anthony

利用可能な「最良の」答えを見つけたと思います。つまり、「ヘッダー」および「フッター」タイプのデータロール要素は標準ウィジェットではありません。それらはある種のハイブリッド構造です。これは、JQueryMobileのソースコードを調べただけでわかりました。これらには「作成」メソッドがないため、呼び出すことができません。

私の回避策は、ウィジェットが私のためにそれを行うことを期待するのではなく、コードに直接クラスを適用することでした。理想的ではありませんが、十分に機能します。

8
Anthony

ヘッダー、フッター、またはコンテンツを変更するときに、ページでpagecreateをトリガーできます。

$('#me-header').closest(":jqmData(role='page')").trigger('pagecreate');

これはjQMバグです： https://github.com/jquery/jquery-mobile/issues/27 。問題レポートのコメントによると、 https://github.com/jquery/jquery-mobile/issues/2703#issuecomment-で詳しく説明されているように、pagecreateを複数回呼び出すと問題が発生する可能性があります467729 。

14
rbu

この質問は今では十分古くなっていますが、問題が発生したので、ここでそれをどのように処理したかを示します（これにより、セットのデータテーマが維持され、含まれているdivとヘッダーに正しいロールが適用されます）。

$('your_selector').find('div[data-role="header"], div[data-role="footer"]').each(
    function( ){
        var dR = $(this).attr('data-role');
        var dT = $(this).attr('data-theme');
        $(this).addClass('ui-' + dR + ' ui-bar-' + dT).attr('role', (dR == 'header' ? 'banner' : 'contentinfo') ).children('h1, h2, h3, h4').each(
            function( ){
                $(this).addClass('ui-title').attr({'role':'heading', 'aria-level':'1'});
            }
        )
    }
);

コードによっては、これを関数として設定し、セレクターを引数として送信する方が便利な場合があります。それが役に立てば幸い。

2
logic8

私にとって、.trigger('create');は、_data-role="page"_を使用して要素に適用された場合に常に機能します

これを試してください：$('#test-console').trigger('create');

それが役に立てば幸い..

2
Sagar Gala

Trigger（ 'create'）;が見つかりました。

次のように体に適用すると機能します：

$('body').append(html).trigger('create');

しかし、私が今直面している問題は、ulリストが未定義のエラーをスローしていることです。

2
Devin Dixon
$('me-header').html(retData).trigger('create');

でなければなりません：

$('me-header').append(retData).trigger('create');
1
wHiTeHaT

おそらく試してください：

$('#me-header').append(retData).trigger('create');
0
jdchowell

これはOPの特定の問題に対する回答ではありませんが、.trigger（ 'create'）が機能しない原因の1つは、jQuery Mobileが現在のスコープに正しく読み込まれず、トリガーに反応しないことが原因である可能性があります。たとえば、不適切に構成されたRequireJS-setupで。

未定義と表示されている場合でもconsole.log（$。mobile）を確認しても問題ありません...

0
Motin

他の人と同じように、ページにヘッダーを挿入するのは大変です。 anthonyが言ったように、問題はヘッダーが「基本的な」ウィジェットではないことです。クラスは、インジェクションを行うjqmによって追加されません。

クラスUIを自分で追加するのはあまり好きではありません。

私の（クレイジー？）提案は、新しいページ（ヘッダーを含む）を作成してから、jqmによって追加されたすべてのクラスui式を含むヘッダータグを抽出することです。パフォーマンスへの影響は本当にわかりませんが、手動でクラスを追加するよりも効果があるようで、現実的です。

以下は一例です。好きですか？

$( '[data-role=page]' ).on( 'pageinit', function ( event, ui ) {
  var sHeader = '<div data-role="header" id="tobechanged" data-position="fixed" data-id="CPL">';
        sHeader += '<a href="#panelImageDetailLeft" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu1</a>';
        sHeader += '<h1>What a Nice title </h1 >';
        sHeader += '<a href="#panelImageDetailRight" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu2</a>';
sHeader += '</div>';

//Create a temporary page to initialize all the ui-class 
//var sId = core.misc.GUID_new();
var sId = "azerty";
$( '#body' ).append( '<div data-role="page" id="' + sId + '">' + sHeader + '<div data-role="content">content</div></div>' );
$.mobile.initializePage(); //do not know if needed
$( '#' + sId ).page();  //very important to let jqm generate the class ui
//console.log( "page():\n" + $( '#' + sId ).html() );

var $myHeader = $( '#tobechanged' );
//console.log( "tobechanged:\n" + $myHeader.html());

//clean the temporary page
$( '#' + sId ).empty();
$.mobile.initializePage(); //do not know if needed

//replace the id
//console.log( "myheader id: ... " + $myHeader.attr( "id" ) ); 
$myHeader.attr( "id", $( "#" + event.target.id ).attr("id") + "Header" );
//console.log( "myheader id: ... " + $myHeader.attr( "id" ) ); 

$( "#" + event.target.id ).find( "[data-role=header]" ).replaceWith( $myHeader );

}）;

0
rlasjunies

呼び出し：

trigger('pagecreate');

直後：

trigger('create');

私のために働く。

0
Dave Nottage