jQuery不响应动态HTML DOM

问题描述

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

尝试:

当将JSON数据硬编码到手风琴中时,它运行良好。

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();

} 已编辑:

In The Image You Can see there is a Details Accordion,When I click on that is working

     <div id="jqAccordion1">
          <h5 style="cursor:pointer">Details</h5>
          <div class="float-left">
             <table style="border:none;cursor: pointer;">

                                            <tbody id="data1">

                                            </tbody>
                                        </table>
                                    </div>


                                </div>

当我从JSON数据中构建手风琴时,它没有像“ DETAILS”那样响应。

enter image description here

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)