javascript 如何在 jquery（移动）中刷新 DIV？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10692916/
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
How to refresh a DIV in jquery (mobile)?
提问by John Brunner
UPDATE: Sorry, I accidentally copied the data-dom-cache="true"line into my content-div. Seems very logical that the app is loading from the dom instead the new content! I've changed it to falseand now it works perfectly.
更新：抱歉，我不小心将该data-dom-cache="true"行复制到我的内容 div 中。应用程序从 dom 加载而不是从新内容加载似乎非常合乎逻辑！我已将其更改为false现在它可以完美运行。
Thanks.
谢谢。
I have a list which is dynamically generated. If someone is clicking on an entry in the list, the user is redirected to a new page where the data is loaded (dynamically). The data which is loaded depends on the list entry which the user has clicked.
我有一个动态生成的列表。如果有人点击列表中的条目，用户将被重定向到数据加载的新页面（动态）。加载的数据取决于用户单击的列表条目。
When the app is loaded the first time, all things work well. But when the user is clicking on another list entry, the same data are represented as on the first run.
当应用程序第一次加载时，一切正常。但是当用户单击另一个列表条目时，显示的数据与第一次运行时相同。
I've played around with the .empty()function from jQuery (to clear the div and append the new data) but it doesn't work.
我玩过.empty()jQuery的函数（清除 div 并附加新数据），但它不起作用。
EDIT:
编辑：
My headlines.html file looks like this:
我的headlines.html 文件如下所示：
<div id="content>
<div id="headlineslist">
<ul data-role="listview" data-theme="c" id="headlineslist">
</ul>
</div>
</div>
<script>
$(document).ready(function() {
HeadlinesLoad();
});
</script>
Here's the Javascript file:
这是 Javascript 文件：
function HeadlinesLoad() {
$.ajax({
type: "POST",
url: "headlines_getter.php",
dataType: 'json',
cache: false,
success: function(data1) {
$.each(data1, function(i, currentObj) {
$('ul#headlineslist').append('<li data-role="list-divider"
class=?"ui-li ui-li-divider ui-bar-b">?' + currentObj.main + '</li>?').listview('refresh');
$.each(currentObj.sub, function (j, currentSub) {
$('ul#headlineslist').append('<li>
<a href="headlinesclicked_temp.html" onclick="headlineID(' + currentSub.sid + ')">' + currentSub.name + '</a></li>').listview('refresh');
});
});
}
});
}
function headlineID(hID) {
window.localStorage.setItem("headlineID", hID);
}
function onHeadlinesLoad() {
var hID = window.localStorage.getItem("headlineID");
window.localStorage.removeItem("headlineID");
window.localStorage.clear();
$.ajax({
url: "headlinesclicked_getter.php?hID=" + hID,
success: function(html) {
if(html){
$("#headlineshome").empty();
$("#headlineshome").html(html);
}
}
});
}
And here is the snippet which lays in the HTML file where the data should be displayed (and refreshed on every new click the user does):
这是位于 HTML 文件中应显示数据的代码段（并在用户每次新点击时刷新）：
<div data-role="content" id="headlineshome"></div>
<script>
$(document).ready(function() {
onHeadlinesLoad();
});
</script>
I don't know why it doesn't work, so I ask you for help.
我不知道为什么它不起作用，所以我向你寻求帮助。
Thanks in advance.
提前致谢。
Best regards, John.
最好的问候，约翰。
回答by lukas.pukenis
Once you update your list using jQuery mobile, consider trigger "create" event, however that's out dated, so use
使用 jQuery mobile 更新列表后，请考虑触发“创建”事件，但该事件已过时，因此请使用
.page()
on your list like this:
在你的清单上是这样的：
$('ul#headlineslist').page();
