Javascript 无需重写的jquery移动更新

我有一个很好用的小代码，除了一件事：如果我扩展了我的可折叠集，它将每5秒折叠一次，因为我设置了

setTimeout（loadPage，5000）

。我的问题是：如何在不重写的情况下构造这个小代码，这样即使它被扩展，它也会在不崩溃的情况下更新

$(document).bind('pageinit', function () {
    var globalVar = {};

    function loadData() {
        $.ajax({
            url: "http://jsbin.com/wulol/2.js",
            async: false,
            dataType: 'json',
            success: function (data) {
                globalVar = data;
            }
        });
    }

    function loadPage() {
        var items = '';
        $.each(globalVar, function (index, item) {
            items += "<div data-role='collapsible' id='" + item.id + "'>";
            items += "<h3>";
            items += "<div class='ui-grid-c'>";
            items += "<div class='ui-block-a'>" + item.airline + "</div>";
            items += "<div class='ui-block-b'>" + item.number + "</div>";
            items += "<div class='ui-block-c'>" + item.people + "</div>";
            items += "<div class='ui-block-d'>" + item.time + "</div>";
            items += "<div class='ui-block-a'></div>";
            items += "<div class='ui-block-b'></div>";
            items += "<div class='ui-block-c'></div>";
            items += "</div>";
            items += "</h3>";
            items += "<p><input type='button' value='Button'></p>";
            items += "</div>";
        });
        $("#result").html(items);
        $("#result").trigger('create');
        setTimeout(loadPage, 5000);

    }

    function ignite() {
        loadData();
        loadPage();
    }
    window.onload = ignite;
});

$（document）.bind（'pageinit'，function（）{
var globalVar={}；
函数loadData（）{
$.ajax({
url:“http://jsbin.com/wulol/2.js",
async:false，
数据类型：“json”，
成功：功能（数据）{
globalVar=数据；
}
});
}
函数loadPage（）{
var项目=“”；
$.each（globalVar，函数（索引，项）{
项目+=“”；
项目+=“”；
项目+=“”；
项目+=“”+item.airline+“”；
项目+=“”+项目编号+“”；
项目+=“”+item.people+“”；
项目+=“”+item.time+“”；
项目+=“”；
项目+=“”；
项目+=“”；
项目+=“”；
项目+=“”；
项目+=“
”；
项目+=“”；
});
$（“#结果”）.html（项目）；
$（“#结果”）.trigger（'create'）；
设置超时（加载页面，5000）；
}
函数ignite（）{
loadData（）；
loadPage（）；
}
window.onload=点火；
});

这是工作票 我真的需要你们的帮助，地球上的人们

您可以使用append（）而不是html（），但在需要检查#result中是否已经存在该项之前

演示：

$（document）.bind（'pageinit'，function（）{
var globalVar={}；
函数loadData（）{
$.ajax({
url:“http://jsbin.com/wulol/2.js",
async:false，
数据类型：“json”，
成功：功能（数据）{
globalVar=数据；
}
});
}
函数loadPage（）{
var项目=“”；
$.each（globalVar，函数（索引，项）
{
如果（$（“#结果#项”+项.id）.size（）==0）
{
项目+=“”；
项目+=“”；
项目+=“”；
项目+=“”+项目。航空公司+“”；
项目+=“”+项目编号+“”；
项目+=“”+项目。人员+“”；
项目+=“”+项目。时间+“”；
项目+=“”；
项目+=“”；
项目+=“”；
项目+=“”；
项目+=“”；
项目+=“
”；
项目+=“”；
}
});
$（“#结果”）。追加（项目）；
$（“#结果”）.trigger（'create'）；
设置超时（加载页面，5000）；
}
函数ignite（）{
loadData（）；
loadPage（）；
}
window.onload=点火；
});

尝试在包装器中添加

data collapsed=“false”

属性

更改：

items+= "<div data-role='collapsible' id='item"+item.id+"'>";

items+=”；

致：

items+=”；

---

查看

您需要比较div，如果存在忽略它，如果不将它附加到$（“#result”）Aimadnet上，请您稍微具体一点。我的意思是，一个例子可以拯救我的生命：）谢谢，我添加了一个工作演示，这样你就可以看到我在说什么了。@user3115243你试过我的答案了吗？

items+= "<div data-role='collapsible' id='item"+item.id+"'>";

items+= "<div data-collapsed="false" data-role='collapsible' id='item"+item.id+"'>";