Question

今晚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页面时的呈现方式不同。它几乎感觉像触发器（'创建'）没有做任何事情。

有什么想法吗？我已经烧了大约三个小时，像http://jquerymobiledictionary.pl/faq.html这样的教程似乎没有应用..

Answer 1

更改页眉，页脚或内容时，您可以在页面上触发pagecreate：

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

这是一个jQM错误：https://github.com/jquery/jquery-mobile/issues/2703。根据问题报告中的评论，多次调用pagecreate可能会导致问题，如https://github.com/jquery/jquery-mobile/issues/2703#issuecomment-4677293中所述。

Answer 2

我相信我找到了'最好'的答案。简而言之，“标题”和“页脚”类型的数据角色元素不是标准小部件。它们是某种混合构造。我通过浏览JQueryMobile的源代码找到了这个。它们没有“创建”方法，因此无法调用。

我的解决方法是直接将类应用到我的代码中，而不是期望小部件为我做。不理想，但效果还不错。

Answer 3

我发现了触发器（＆＃39;创建＆＃39;）;

适用于身体时适用：

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

但是我现在遇到的问题是ul列表引发了一个未定义的错误。

Answer 4

这个问题现在已经足够老了，但我刚遇到问题所以这就是我处理它的方式 - （这维护了set data-theme并为包含div和header应用了正确的角色）

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

根据您的代码，将其设置为函数并将选择器作为参数发送可能更方便。希望它有所帮助。

Answer 5

对我而言，.trigger('create');如果应用于data-role="page"

元素，则始终有效

试试这个：$('#test-console').trigger('create');

希望有所帮助......

Answer 6

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

应该是：

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

Answer 7

也许试试：

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

Answer 8

这不是OP的具体问题的答案，但.trigger（'create'）不起作用的一个原因可能是jQuery Mobile未在当前范围内正确加载，因此没有对触发器作出反应 - 例如，这可能发生在配置不当的RequireJS设置中。

检查console.log（$ .mobile）以防它显示未定义...

并没有什么坏处

Answer 9

与其他人一样，它让我很难在页面中插入标题。正如安东尼所说，问题是标题不是“基本”小部件。 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 );

}）;

Answer 10

通话：

trigger('pagecreate');

紧接着：

trigger('create');

适合我。

JQuery Mobile触发器（'create'）命令不起作用

10 个答案: