blocks|key|407166|text|对于其他正在寻找答案的人来说，从2011年6月9日起，jQuery移动团队已经在一个开发分支中实现了这一功能。根据这个问题，它将在这个庄园中工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|407167|$(".ui-content").append(+...+lots+of+HTML+...).trigger(+"enhance"+);|offset|length|style|CODE|407168|https://github.com/jquery/jquery-mobile/issues/1799|407169|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1W|0|0|1F|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|I]]]]

For others searching for an answer for this, as of 6/9/2011 the jQuery mobile team has implemented this feature in a development branch. According to this issue, it will work in this manor:

<code>$(".ui-content").append( ... lots of HTML ...).trigger( "enhance" );</code>

<a href="https://github.com/jquery/jquery-mobile/issues/1799" rel="nofollow">https://github.com/jquery/jquery-mobile/issues/1799</a>

blocks|key|3248140|text|在jQuery移动框架alpha4.1和更早版本的中，这是通过使用.page()方法完成的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|3248141|示例来说明这没有太大的区别：|3248142|$(+...+lots+of+HTML+...).appendTo(".ui-content").page();|code-block|syntax|javascript|3248143|更多信息：http://jquerymobiledictionary.dyndns.org/faq.html|3248144|为什么引入这种新方法(参见T.Stone的答案)？编写.page()的前提是DOM元素以前没有得到增强。|3248145|为了解耦，JQM团队引入了事件驱动的增强，不仅允许触发事件，而且可以在不修改jQuery的.page方法的代码的情况下为新的data-role创建新的窗口小部件。|3248146|entityMap|0|LINK|mutability|MUTABLE|url|http://jquerymobiledictionary.dyndns.org/faq.html^0|0|P|X|7|0|0|0|5|1D|0|0|R|7|0|1Q|9|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|16|8|@]|E|@]|F|$]]|$1|I|3|J|5|K|7|17|8|@]|E|@]|F|$L|M]]|$1|N|3|O|5|6|7|18|8|@]|E|@$9|19|A|1A|1|1B]]|F|$]]|$1|P|3|Q|5|6|7|1C|8|@$9|1D|A|1E|B|D]]|E|@]|F|$]]|$1|R|3|S|5|6|7|1F|8|@$9|1G|A|1H|B|D]]|E|@]|F|$]]|$1|T|3|-4|5|6|7|1I|8|@]|E|@]|F|$]]]|U|$V|$5|W|X|Y|F|$Z|10]]]]

In jQuery Mobile Framework alpha4.1 and earlier this was done by using the <code>.page()</code> method.

Example to show there's not much of a difference: 

<pre><code>$( ... lots of HTML ...).appendTo(".ui-content").page();
</code></pre>

More info: <a href="http://jquerymobiledictionary.dyndns.org/faq.html" rel="nofollow">http://jquerymobiledictionary.dyndns.org/faq.html</a> 

Why the new way (see T. Stone's answer) was introduced? <code>.page()</code> was written with an assumprion that the DOM element was not enhanced before. 

For the sake of decoupling tje jQuery Mobile team introduces event-driven enhancement that will not only allow triggering the event, but also will make creating new widgets for new <code>data-role</code>s possible without modifying the code of JQM's .page method.

blocks|key|410567|text|刚刚得到了类似问题的答案，请尝试使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|410568|.trigger("create")|code-block|syntax|javascript|410569|将内容添加到的元素上。|410570|查看此处：jQuery+Mobile+does+not+apply+styles+after+dynamically+adding+content|offset|length|410571|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/7999436/jquery-mobile-does-not-apply-styles-after-dynamically-adding-content^0|0|0|0|5|1W|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

Just got an answer to a similar question, try using

<pre><code>.trigger("create")
</code></pre>

on the element that gets the content added to.

See here: <a href="https://stackoverflow.com/questions/7999436/jquery-mobile-does-not-apply-styles-after-dynamically-adding-content">jQuery Mobile does not apply styles after dynamically adding content</a>

blocks|key|3461609|text|如果您使用ajax方法加载到内容中，这就是我让样式和jquery移动功能工作的方式。这与上面的建议基本相同，但对于某些人来说，您可能希望看到更完整的示例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3461610|代码如下：|3461611|$.ajax({
url:+'url.php',
success:+function(data)+{++++
$("#div").html(data).trigger('create');
}
});|code-block|syntax|javascript|3461612|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you're using the ajax method to load into content, this is how I got the styling and jquery mobile functionality to work. It's pretty much the same as the suggestion above but for some people you probably like seeing a more full example.

Here is the code:

<pre><code>$.ajax({
url: 'url.php',
success: function(data) { 
$("#div").html(data).trigger('create');
}
});
</code></pre>

blocks|key|407292|text|如果将项添加到列表视图中，则需要对其调用refresh()方法来更新样式并创建所添加的任何嵌套列表。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|407293|$('#mylist').listview('refresh');|code-block|syntax|javascript|407294|如果你需要渲染一个动态页面，请阅读：“jQuery+Mobile+and+Dynamic+Page+Generation”。本文中的示例代码：|offset|length|407295|//+Load+the+data+for+a+specific+category,+based+on
//+the+URL+passed+in.+Generate+markup+for+the+items+in+the
//+category,+inject+it+into+an+embedded+page,+and+then+make
//+that+page+the+current+active+page.
function+showCategory(+urlObj,+options+)
{
++++var+categoryName+=+urlObj.hash.replace(+/.*category=/,+""+),

++++++++//+Get+the+object+that+represents+the+category+we
++++++++//+are+interested+in.+Note,+that+at+this+point+we+could
++++++++//+instead+fire+off+an+ajax+request+to+fetch+the+data,+but
++++++++//+for+the+purposes+of+this+sample,+it's+already+in+memory.
++++++++category+=+categoryData[+categoryName+],

++++++++//+The+pages+we+use+to+display+our+content+are+already+in
++++++++//+the+DOM.+The+id+of+the+page+we+are+going+to+write+our
++++++++//+content+into+is+specified+in+the+hash+before+the+'?'.
++++++++pageSelector+=+urlObj.hash.replace(+/\?.*$/,+""+);

++++if+(+category+)+{
++++++++//+Get+the+page+we+are+going+to+dump+our+content+into.
++++++++var+$page+=+$(+pageSelector+),

++++++++++++//+Get+the+header+for+the+page.
++++++++++++$header+=+$page.children(+":jqmData(role=header)"+),

++++++++++++//+Get+the+content+area+element+for+the+page.
++++++++++++$content+=+$page.children(+":jqmData(role=content)"+),

++++++++++++//+The+markup+we+are+going+to+inject+into+the+content
++++++++++++//+area+of+the+page.
++++++++++++markup+=+""+%2B+category.description+%2B+"<ul+data-role='listview'+data-inset='true'>",

++++++++++++//+The+array+of+items+for+this+category.
++++++++++++cItems+=+category.items,

++++++++++++//+The+number+of+items+in+the+category.
++++++++++++numItems+=+cItems.length;

++++++++//+Generate+a+list+item+for+each+item+in+the+category
++++++++//+and+add+it+to+our+markup.
++++++++for+(+var+i+=+0;+i+<+numItems;+i%2B%2B+)+{
++++++++++++markup+%2B=+"<li>"+%2B+cItems[i].name+%2B+"</li>";
++++++++}
++++++++markup+%2B=+"</ul>";

++++++++//+Find+the+h1+element+in+our+header+and+inject+the+name+of
++++++++//+the+category+into+it.
++++++++$header.find(+"h1"+).html(+category.name+);

++++++++//+Inject+the+category+items+markup+into+the+content+element.
++++++++$content.html(+markup+);

++++++++//+Pages+are+lazily+enhanced.+We+call+page()+on+the+page
++++++++//+element+to+make+sure+it+is+always+enhanced+before+we
++++++++//+attempt+to+enhance+the+listview+markup+we+just+injected.
++++++++//+Subsequent+calls+to+page()+are+ignored+since+a+page/widget
++++++++//+can+only+be+enhanced+once.
++++++++$page.page();

++++++++//+Enhance+the+listview+we+just+injected.
++++++++$content.find(+":jqmData(role=listview)"+).listview();

++++++++//+We+don't+want+the+data-url+of+the+page+we+just+modified
++++++++//+to+be+the+url+that+shows+up+in+the+browser's+location+field,
++++++++//+so+set+the+dataUrl+option+to+the+URL+for+the+category
++++++++//+we+just+loaded.
++++++++options.dataUrl+=+urlObj.href;

++++++++//+Now+call+changePage()+and+tell+it+to+switch+to
++++++++//+the+page+we+just+modified.
++++++++$.mobile.changePage(+$page,+options+);
++++}
}|407296|entityMap|0|LINK|mutability|MUTABLE|url|http://jquerymobile.com/test/docs/pages/page-dynamic.html^0|0|0|J|15|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create any nested lists that are added. For example:

<pre><code>$('#mylist').listview('refresh');
</code></pre>

If you need to render a dynamic page, please read:"<a href="http://jquerymobile.com/test/docs/pages/page-dynamic.html">jQuery Mobile and Dynamic Page Generation</a>". Sample code from this article:

<pre><code>// Load the data for a specific category, based on
// the URL passed in. Generate markup for the items in the
// category, inject it into an embedded page, and then make
// that page the current active page.
function showCategory( urlObj, options )
{
 var categoryName = urlObj.hash.replace( /.*category=/, "" ),

 // Get the object that represents the category we
 // are interested in. Note, that at this point we could
 // instead fire off an ajax request to fetch the data, but
 // for the purposes of this sample, it's already in memory.
 category = categoryData[ categoryName ],

 // The pages we use to display our content are already in
 // the DOM. The id of the page we are going to write our
 // content into is specified in the hash before the '?'.
 pageSelector = urlObj.hash.replace( /\?.*$/, "" );

 if ( category ) {
 // Get the page we are going to dump our content into.
 var $page = $( pageSelector ),

 // Get the header for the page.
 $header = $page.children( ":jqmData(role=header)" ),

 // Get the content area element for the page.
 $content = $page.children( ":jqmData(role=content)" ),

 // The markup we are going to inject into the content
 // area of the page.
 markup = "&lt;p&gt;" + category.description + "&lt;/p&gt;&lt;ul data-role='listview' data-inset='true'&gt;",

 // The array of items for this category.
 cItems = category.items,

 // The number of items in the category.
 numItems = cItems.length;

 // Generate a list item for each item in the category
 // and add it to our markup.
 for ( var i = 0; i &lt; numItems; i++ ) {
 markup += "&lt;li&gt;" + cItems[i].name + "&lt;/li&gt;";
 }
 markup += "&lt;/ul&gt;";

 // Find the h1 element in our header and inject the name of
 // the category into it.
 $header.find( "h1" ).html( category.name );

 // Inject the category items markup into the content element.
 $content.html( markup );

 // Pages are lazily enhanced. We call page() on the page
 // element to make sure it is always enhanced before we
 // attempt to enhance the listview markup we just injected.
 // Subsequent calls to page() are ignored since a page/widget
 // can only be enhanced once.
 $page.page();

 // Enhance the listview we just injected.
 $content.find( ":jqmData(role=listview)" ).listview();

 // We don't want the data-url of the page we just modified
 // to be the url that shows up in the browser's location field,
 // so set the dataUrl option to the URL for the category
 // we just loaded.
 options.dataUrl = urlObj.href;

 // Now call changePage() and tell it to switch to
 // the page we just modified.
 $.mobile.changePage( $page, options );
 }
}
</code></pre>

blocks|key|413070|text|$('.selector').trigger('create');似乎是最好的方法，请参阅以下官方常见问题解答：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|413071|http://view.jquerymobile.com/master/demos/faq/injected-content-is-not-enhanced.php|413072|entityMap|0|LINK|mutability|MUTABLE|url^0|0|X|0|0|2A|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@$9|S|A|T|1|U]]|E|$]]|$1|H|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|G]]]]

<code>$('.selector').trigger('create');</code> seems to be the best approach, see the official FAQ below:

<a href="http://view.jquerymobile.com/master/demos/faq/injected-content-is-not-enhanced.php" rel="nofollow">http://view.jquerymobile.com/master/demos/faq/injected-content-is-not-enhanced.php</a>

blocks|key|410804|text|作为对所提供答案的更新。从v1.45开始，您可以选择您的内容并使用.enhanceWithin()来增强子元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|410805|http://api.jquerymobile.com/enhanceWithin/|410806|entityMap|0|LINK|mutability|MUTABLE|url^0|X|G|0|0|16|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@$9|S|A|T|1|U]]|E|$]]|$1|H|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|G]]]]

As an update to the answers provided. As of v1.45 you can select your content and use <code>.enhanceWithin()</code> to enhance the child elements.

<a href="http://api.jquerymobile.com/enhanceWithin/" rel="nofollow">http://api.jquerymobile.com/enhanceWithin/</a>

Objective: Load HTML content via <code>$.ajax</code>, insert it into the DOM, have jQuery Mobile apply theme styles to it.

Problem: Content gets inserted but lacks jQuery Mobile theming.

Code:

<pre><code>$.ajax({
 ...
 success: function(html) {
 $('#container').append(html);
 $('#page').page('refresh', true);
 }
});
</code></pre>

The HTML returned includes <code>data-role</code> tags which jQM should style...

<pre><code>&lt;a data-role="button"&gt;Do Something&lt;/a&gt;
</code></pre>

Instead of applying the styles like it should, I get the following error:

<blockquote>
 uncaught exception: no such method
 'refresh' for page widget instance
</blockquote>

<hr>

Above code tested using <code>http://code.jquery.com/mobile/latest/jquery.mobile.js</code>

<hr>

Similar questions which brought me to the above error message:

<a href="https://stackoverflow.com/questions/5157386/consistently-update-page-with-appropriate-jquery-mobile-styles">Consistently update page with appropriate jQuery Mobile styles</a>

<a href="https://stackoverflow.com/questions/5249250/jqm-jquerymobile-dynamically-added-elements-not-displaying-correctly-and-css-is">JQM (jQueryMobile) Dynamically added elements not displaying correctly and CSS is not applied</a>

<a href="https://stackoverflow.com/questions/4039428/jquery-mobile-dynamically-creating-form-elements">jQuery Mobile - Dynamically creating form elements</a>

Forcing jQuery Mobile to re-evaluate styles/theme on dynamically inserted content

jQuery

目标：通过$.ajax加载HTML内容，将其插入到DOM中，让jQuery应用主题样式。移动端问题：内容被插入，但缺乏jQuery 主题。代码：$.ajax({    ...    success: function(html) {        $('#container').append(html);       ...

问强制jQuery移动设备重新评估动态插入内容的样式/主题
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问强制jQuery移动设备重新评估动态插入内容的样式/主题EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问强制jQuery移动设备重新评估动态插入内容的样式/主题
EN