Javascript JQuery没有响应动态HTML DOM

我试图从API获取数据，并格式化JSON以显示在Jquery Accordion中。但是当我这样做时，JQuery没有响应。CSS和手风琴功能都不起作用

尝试：

{
"tabs": [{
    "tab_elements": [{
        "details": [{
            "element_display_name": "ABC",
            "element_items": [{
                    "item_source_name": "AAA",
                    "item_details": {
                        "0": "AAA",
                        "1": "#233",
                        "2": "qqq"
                    }
                },
                {
                    "item_source_name": "BBB",
                    "item_details": {
                        "0": "D1",
                        "1": "D2",
                        "2": "D3"
                    }
                },
                {
                    "item_source_name": "CCC",
                    "item_details": {
                        "0": "SH 1",
                        "1": "SH 2",
                        "2": "SH 3"
                    }
                }
            ]
        }]
    }]
}]

function display_data(name) {

document.getElementById("data2").style.display = "block";
let data = [];
data = details.filter(x => x.element_display_name === name)

data = data[0].element_items
var temp = "";
data.forEach((u) => {
    temp += `<h2 > ${u.item_source_name} </h2>`
    Object.keys(u.item_details).forEach((v) => {
        temp += '<div class="flex-container" style="padding:0 4%; margin-top:3%"><h6 class="big">' +
            v + '</h6>'
        temp += '<p>' + u.item_details[v] + '</p></div>'
    });
});
document.getElementById("jqAccordion3").innerHTML = temp
$('#jqAccordion3').html = temp
$('#jqAccordion3').accordion();

当将JSON数据硬编码到accordion中时，它工作得非常好

JSON数据：

{
"tabs": [{
    "tab_elements": [{
        "details": [{
            "element_display_name": "ABC",
            "element_items": [{
                    "item_source_name": "AAA",
                    "item_details": {
                        "0": "AAA",
                        "1": "#233",
                        "2": "qqq"
                    }
                },
                {
                    "item_source_name": "BBB",
                    "item_details": {
                        "0": "D1",
                        "1": "D2",
                        "2": "D3"
                    }
                },
                {
                    "item_source_name": "CCC",
                    "item_details": {
                        "0": "SH 1",
                        "1": "SH 2",
                        "2": "SH 3"
                    }
                }
            ]
        }]
    }]
}]

function display_data(name) {

document.getElementById("data2").style.display = "block";
let data = [];
data = details.filter(x => x.element_display_name === name)

data = data[0].element_items
var temp = "";
data.forEach((u) => {
    temp += `<h2 > ${u.item_source_name} </h2>`
    Object.keys(u.item_details).forEach((v) => {
        temp += '<div class="flex-container" style="padding:0 4%; margin-top:3%"><h6 class="big">' +
            v + '</h6>'
        temp += '<p>' + u.item_details[v] + '</p></div>'
    });
});
document.getElementById("jqAccordion3").innerHTML = temp
$('#jqAccordion3').html = temp
$('#jqAccordion3').accordion();

}

功能：

{
"tabs": [{
    "tab_elements": [{
        "details": [{
            "element_display_name": "ABC",
            "element_items": [{
                    "item_source_name": "AAA",
                    "item_details": {
                        "0": "AAA",
                        "1": "#233",
                        "2": "qqq"
                    }
                },
                {
                    "item_source_name": "BBB",
                    "item_details": {
                        "0": "D1",
                        "1": "D2",
                        "2": "D3"
                    }
                },
                {
                    "item_source_name": "CCC",
                    "item_details": {
                        "0": "SH 1",
                        "1": "SH 2",
                        "2": "SH 3"
                    }
                }
            ]
        }]
    }]
}]

function display_data(name) {

document.getElementById("data2").style.display = "block";
let data = [];
data = details.filter(x => x.element_display_name === name)

data = data[0].element_items
var temp = "";
data.forEach((u) => {
    temp += `<h2 > ${u.item_source_name} </h2>`
    Object.keys(u.item_details).forEach((v) => {
        temp += '<div class="flex-container" style="padding:0 4%; margin-top:3%"><h6 class="big">' +
            v + '</h6>'
        temp += '<p>' + u.item_details[v] + '</p></div>'
    });
});
document.getElementById("jqAccordion3").innerHTML = temp
$('#jqAccordion3').html = temp
$('#jqAccordion3').accordion();

功能显示\u数据（名称）{
document.getElementById（“data2”）.style.display=“block”；
让数据=[]；
data=details.filter（x=>x.element\u display\u name==name）
数据=数据[0]。元素\u项
var temp=“”；
data.forEach（（u）=>{
temp+=`${u.item\u source\u name}`
Object.key（u.item\u details）.forEach（（v）=>{
温度+=''的+
v+“”
temp+=''+u.item_详细信息[v]+'
'
});
});
document.getElementById（“jqaccordin3”）.innerHTML=temp
$（'#jqAccordion3'）。html=temp
$（'jqAccordion3'）。手风琴（）；

} 编辑：

{
"tabs": [{
    "tab_elements": [{
        "details": [{
            "element_display_name": "ABC",
            "element_items": [{
                    "item_source_name": "AAA",
                    "item_details": {
                        "0": "AAA",
                        "1": "#233",
                        "2": "qqq"
                    }
                },
                {
                    "item_source_name": "BBB",
                    "item_details": {
                        "0": "D1",
                        "1": "D2",
                        "2": "D3"
                    }
                },
                {
                    "item_source_name": "CCC",
                    "item_details": {
                        "0": "SH 1",
                        "1": "SH 2",
                        "2": "SH 3"
                    }
                }
            ]
        }]
    }]
}]

function display_data(name) {

document.getElementById("data2").style.display = "block";
let data = [];
data = details.filter(x => x.element_display_name === name)

data = data[0].element_items
var temp = "";
data.forEach((u) => {
    temp += `<h2 > ${u.item_source_name} </h2>`
    Object.keys(u.item_details).forEach((v) => {
        temp += '<div class="flex-container" style="padding:0 4%; margin-top:3%"><h6 class="big">' +
            v + '</h6>'
        temp += '<p>' + u.item_details[v] + '</p></div>'
    });
});
document.getElementById("jqAccordion3").innerHTML = temp
$('#jqAccordion3').html = temp
$('#jqAccordion3').accordion();

细节

当我从JSON数据构建手风琴时，它的响应不像“细节”一样

---

我看不出您在哪里获取数据。我怀疑您在尝试处理响应中预期的数据之前，没有等待获取的响应。但是你需要展示更多的细节。假设数据已经被提取，我的JSON已经准备好了注意：JSON已经存在了，但这个问题不是一个安全的假设。您需要显示不起作用的代码。您所做的只是显示正在工作的代码。如果你不能显示坏代码，我就帮不了你。。。或者您在控制台中看到的任何错误，等等。很可能问题出在您的获取中，因为您已经证明硬编码的JSON是有效的。@MARC我已经分享了一些图片。有描述。你能检查一下吗？告诉我你的数据不匹配。也就是说，您硬编码的数据与您在响应中实际接收到的数据不匹配。我想我不能再帮你了，祝你好运。