微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jQuery不响应动态HTML DOM

如何解决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 举报,一经查实,本站将立刻删除。