Jquery Mobile：强制刷新内容
我有一个很大的问题：我有一个listview ，每个#concorsi接到页面#concorsi 。 当我点击链接时，URL变为#concorsi?numero=1因为我从JSON中获取表单编号1。
当我第一次点击它一切都好。 每个输入都使用jQuery Mobile类可视化，但是如果我回来并且在进入相同的链接后代码不刷新。 标题很好地可视化，但内容没有。 如何强制刷新div内容？
这些是我的JavaScript函数：
$(document).bind( "pagebeforechange", function( e, data ) { // We only want to handle changePage() calls where the caller is // asking us to load a page by URL. if ( typeof data.toPage === "string" ) { // We are being asked to load a page by URL, but we only // want to handle URLs that request the data for a specific var u = $.mobile.path.parseUrl( data.toPage ), re = /^#concorso/; if ( u.hash.search(re) !== -1 ) { // We're being asked to display the items for a specific category. // Call our internal method that builds the content for the category // on the fly based on our in-memory category data structure. showConcorso( u, data.options); // Make sure to tell changePage() we've handled this call so it doesn't // have to do anything. e.preventDefault(); } } });
并且showConcorso() L
function showConcorso( urlObj, options ) { document.getElementById('conccont').innerHTML=""; var concorsoNum = urlObj.hash.replace( /.*numero=/, "" ), // 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. concorso = obj.concorsi[ concorsoNum ], // 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 ( concorso ) { // 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)" ), $footer = $page.children( ":jqmData(role=footer)" ); // Find the h1 element in our header and inject the name of // the category into it. $header.find( "h1" ).html(concorso['title']); markup=document.createElement('form'); markup.setAttribute('action','#home'); markup.setAttribute('method','POST'); markup.id="concForm"; markup.onchange="alert (test)"; items=obj.concorsi[concorsoNum].elementi; for(field in items) { nest=items[field]; nest=obj.campi[nest]; switch(nest.type){ case "free": markup.appendChild(createFree(nest)); break; case "text": markup.appendChild(createText(nest)); break; case "textarea": markup.appendChild(createTextArea(nest)); break; case "switch": markup.appendChild(createSwitch(nest)); break; case "switchcust": markup.appendChild(createSwitchCustom(nest)); break; case "slider": markup.appendChild(createSlider(nest)); break; case "select": markup.appendChild(createSelect(nest)); break; case "checkbox": markup.appendChild(createCheckbox(nest)); break; case "radio": markup.appendChild(createRadio(nest)); break; case "reset": markup.appendChild(createButton(nest)); break; case "submit": markup.appendChild(createButton(nest)); break; } } // 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(); // 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 ); } }
刷新页面用户：
.trigger('create');
更多信息：
创建与刷新：一个重要的区别
请注意，某些小部件具有的create event和refresh方法之间存在重要差异。 create事件适用于增强包含一个或多个小部件的原始标记。 刷新方法应该用于已经以编程方式操作的现有（已经增强的）小部件，并且需要更新UI以匹配。例如，如果您有一个页面，您在页面创建后动态添加了一个带有data-role = listview属性的新的无序列表，则在该列表的父元素上触发create会将其转换为listview样式的小部件。 如果以编程方式添加更多列表项，则调用listview的refresh方法会将这些新列表项更新为增强状态，并保持现有列表项不变。
您还可以像这样刷新列表视图：
$('#mylist').listview('refresh');
更多信息：
更新列表
如果将项添加到列表视图，则需要在其上调用refresh（）方法来更新样式并创建添加的任何嵌套列表。 例如：$('#mylist').listview('refresh');请注意，refresh（）方法仅影响附加到列表的新节点。 这是出于性能原因而完成的。 刷新过程将忽略已增强的任何列表项。 这意味着如果更改已增强的列表项的内容或属性，则不会反映这些内容或属性。 如果要更新列表项，请在调用refresh之前将其替换为新标记。
刷新表单元素：
刷新表单元素
在jQuery Mobile中，一些增强的表单控件只是简单的样式（输入），但其他的是自定义控件（选择，滑块），由本机控件构建并与之保持同步。 要以编程方式使用JavaScript更新表单控件，首先操作本机控件，然后使用refresh方法告诉增强控件更新自身以匹配新状态。 以下是如何更新常用表单控件，然后调用refresh方法的一些示例：
复选框：
$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");
收音机：
$("input[type='radio']").prop("checked",true).checkboxradio("refresh");
选择：
var myselect = $("#selectfoo"); myselect[0].selectedIndex = 3; myselect.selectmenu("refresh");
滑块：
$("input[type='range']").val(60).slider("refresh");
翻转开关（他们使用滑块）：
var myswitch = $("#selectbar"); myswitch[0].selectedIndex = 1; myswitch.slider("refresh");
可折叠：
$('div[data-role=collapsible]').collapsible();