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

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 页面时不同。几乎感觉 trigger('create') 什么也没做。

有什么想法吗？我已经烧了大约三个小时，像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

我相信我已经找到了“最佳”答案。简而言之，'header' 和 'footer' 类型的数据角色元素不是标准的小部件。它们是某种混合结构。我通过浏览 JQueryMobile 的源代码发现了这一点。它们没有“创建”方法，因此无法调用。

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

Answer 3

我发现 trigger('create');

像这样应用于身体时起作用：

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

但我现在遇到的问题是 ul 列表抛出未定义的错误。

Answer 4

这个问题现在已经够老了，但我刚刚遇到了这个问题，所以这就是我的处理方法——（这维护了设置的数据主题并为包含的 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'});
            }
        )
    }
);

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

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');

为我工作。