JQuery Mobile trigger('create') 命令不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8088837/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Mobile trigger('create') command not working
提问by Anthony
JQuery Mobile is making my cry tonight. I'm trying to build custom controls so I don't repeat certain elements through my app, and it's giving me a hard time. Specifically, I have the following in an HTML file:
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>
In my main file I'm essentially doing:
在我的主文件中，我基本上是在做：
<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>
So here's the problem - The header doesn't render the same as it does as when I paste the contents of header.html directly into my JQM page. It almost feels like trigger('create') isn't doing anything.
所以问题来了 - 标题的呈现方式与我将 header.html 的内容直接粘贴到 JQM 页面时的呈现方式不同。几乎感觉 trigger('create') 没有做任何事情。
Any ideas? I've burned about three hours and tutorials like http://jquerymobiledictionary.pl/faq.htmldon't seem to be applying..
有任何想法吗？我已经烧了大约三个小时，像http://jquerymobiledictionary.pl/faq.html这样的教程似乎没有应用..
采纳答案by Anthony
I believe I've found the 'best' answer available. In short, the 'header' and 'footer' type data-role elements are not standard widgets. They are some sort of hybrid construct. I found this out by just going through the source code of JQueryMobile. They don't have a 'create' method, so it can't be called.
我相信我已经找到了可用的“最佳”答案。简而言之，'header' 和 'footer' 类型的数据角色元素不是标准的小部件。它们是某种混合结构。我通过浏览 JQueryMobile 的源代码发现了这一点。他们没有“创建”方法，因此无法调用。
My workaround was to just apply the classes directly to my code, instead of expecting the widget to do it for me. Not ideal, but it works well enough.
我的解决方法是直接将这些类应用到我的代码中，而不是期望小部件为我做这件事。不理想，但效果很好。
回答by rbu
When changing header, footer or content, you can trigger pagecreateon the page:
更改页眉、页脚或内容时，可以pagecreate在页面上触发：
$('#me-header').closest(":jqmData(role='page')").trigger('pagecreate');
This is a jQM bug: https://github.com/jquery/jquery-mobile/issues/2703.
According to a comment in the issue report, calling pagecreatemultiple times may cause problems though, as elaborated in https://github.com/jquery/jquery-mobile/issues/2703#issuecomment-4677293.
这是一个 jQM 错误：https: //github.com/jquery/jquery-mobile/issues/2703。根据问题报告中的评论，pagecreate多次调用可能会导致问题，如https://github.com/jquery/jquery-mobile/issues/2703#issuecomment-4677293 中所述。
回答by Devin Dixon
I've found that the trigger('create');
我发现 trigger('create');
Works when applied to the body like so:
像这样应用于身体时有效：
$('body').append(html).trigger('create');
But the issue I am running into now is the ul list are throwing an undefined error.
但是我现在遇到的问题是 ul 列表抛出了一个未定义的错误。
回答by logic8
this question is old enough by now, but I just ran into the problem so here is how I handled it -- (this maintains the set data-theme and applies the correct roles for the containing divs and headers)
这个问题现在已经够老了，但我刚刚遇到了这个问题，所以我是如何处理它的——（这维护了设置的数据主题并为包含的 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'});
}
)
}
);
depending on your code, it might be more convenient to set this up as a function and send your selector as an argument. Hope it helps.
根据您的代码，将其设置为函数并将选择器作为参数发送可能更方便。希望能帮助到你。
回答by Sagar Gala
For me, .trigger('create');always works if applied to the element with data-role="page"
对我来说，.trigger('create');如果应用于元素总是有效data-role="page"
Try This : $('#test-console').trigger('create');
尝试这个 ： $('#test-console').trigger('create');
Hope it helps..
希望能帮助到你..
回答by wHiTeHaT
$('me-header').html(retData).trigger('create');
should be:
应该：
$('me-header').append(retData).trigger('create');
回答by jdchowell
Perhaps try:
也许尝试：
$('#me-header').append(retData).trigger('create');
回答by Motin
This is not the answer to the specific issue of the OP, but one cause for .trigger('create') not working could be that jQuery Mobile is not loaded properly in the current scope and thus not reacting to the trigger - which can happen in a poorly configured RequireJS-setup for instance.
这不是 OP 特定问题的答案，但 .trigger('create') 不工作的一个原因可能是 jQuery Mobile 未在当前范围内正确加载，因此不会对触发器做出反应 - 这可能会发生例如，在配置不当的 RequireJS-setup 中。
It doesn't hurt to check console.log($.mobile) in case it shows undefined...
如果它显示未定义，检查 console.log($.mobile) 并没有什么坏处...
回答by rlasjunies
As others it make me nuts to inject header in a page. As said by anthony the problem is header is not a "basic" widget. The classes are not added by jqm doing the injection.
和其他人一样，在页面中注入标题让我很生气。正如安东尼所说，问题是标题不是“基本”小部件。jqm 进行注入时不会添加这些类。
I do not like some much to add class ui by my self.
我不太喜欢自己添加类 ui。
My (crazy?) proposal is to create a brand new page (including the header) and then extract the header tag including all the class ui ceremony added by jqm. I really do not know the perf impact, ... but it seems to work and seems more realiable than adding class by hands.
我（疯狂？）的建议是创建一个全新的页面（包括标题），然后提取包括 jqm 添加的所有类 ui 仪式的标题标记。我真的不知道性能影响，...但它似乎有效，而且似乎比手动添加类更可靠。
below is an example. Do you like?
下面是一个例子。你喜欢？
$( '[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 );
});
});
回答by Dave Nottage
Calling:
调用：
trigger('pagecreate');
immediately after:
之后立马：
trigger('create');
works for me.
为我工作。
