Javascript 从JSON生成HTML，分配click事件，但不处理初始div

糟糕的标题，不太确定如何描述

请看一下下面的对象，您可以看到有4个键叫做

数据点击

。从这个JSON对象生成HTML时，这些键被正确地添加为属性

然而，出于某种原因，当我在HTML对象上执行

queryselectoral

搜索时，它只会找到其中的3个属性，这是为什么

var json=`{
“部门”：{
“id”：“marvLightbox”，
“数据点击”：“事件关闭”，
"0": {
“部门”：{
“类”：“marvLightbox__________________左”，
“数据单击”：“EventLeft”
}
},
"1": {
“部门”：{
“类”：“marvLightbox（右）”，
“数据单击”：“EventRight”
}
},
"2": {
“部门”：{
"0": {
“部门”：{
“类”：“marvLightbox_uuuEschint”，
“内容”：“按ESC键关闭”
}
},
"1": {
“部门”：{
“类”：“marvLightbox\uuuuu close”，
“数据单击”：“事件关闭”
}
},
"2": {
“img”：{
“src”：https://www.asphaltandrubber.com/wp-content/gallery/ducati-1199-panigale-r-launch-with-jensen-beeler/ducati-1199-panigale-r-launch-cota-jensen-beeler-07.jpg",
“类别”：“响应式img图像”
}
},
“类别”：“marvLightbox”
}
}
}
}`;
函数buildHTML（代码）{
“严格使用”；
var handleAttribute=函数（元素、属性、值）{
if（HtmleElement的值实例）{
返回元素.appendChild（值）；
}
开关（属性）{
案例“类”：
案例'src'：
案件编号：
案例“数据点击”：
返回元素.setAttribute（属性，值）；
案例“内容”：
return element.innerHTML=值；
//其他键。。。
违约：
console.log（element.tagName、属性、值）；
}
}
var htmleviver=函数（键、值）{
//解析为元素
如果（isNaN（键）&&typeof值==='object'）{
var元素=document.createElement（键）；
var子值；
for（值中的var属性）{
handleAttribute（元素、属性、值[属性]）；
}
返回元素；
//将元素从{index:{tagName:element}}移动到{index:element}
}如果（！isNaN（键））{
返回值[Object.keys（值）[0]]；
//别管财产
}否则{
返回值；
}
}
试一试{
var htmlObject=JSON.parse（代码，htmleviver）；
}捕获（e）{
log（'marv.lightbox（Error）：提供的HTML结构似乎有错误：'+e）；
}
返回htmlObject；
}
（功能（）{
var html=buildHTML（json）；
html.querySelectorAll（“[数据点击]）.forEach（函数（e）{
e、 addEventListener（'click'，function（）{events（e.dataset.click）；}）；
document.getElementById（'debug'）。innerHTML+='函数：'+e.dataset.click+'元素：'+e+'
'；
});
document.getElementById（'test'）.append（html）；
}());
body>div{
宽度：50%；
浮动：左；
显示：内联块；
}
img{
最大宽度：80%；
最高高度：80%；
}
我不认为问题出在
查询选择部分。我在代码笔的第103行添加了一个
警报（html.innerHTML）
，以快速查看已构建的html的外观。该
html
变量仅包含三个“数据单击”属性，因此问题似乎在于生成这些html属性

看起来它没有处理第一次数据点击，这也看起来它在json结构中的不同位置，所以这可能是它被忽略的原因

编辑
嗯，这很奇怪，尽管现在，我看到的与您看到的相反，即，我可以在“测试”中看到四个数据单击属性，在“调试”中看到三个数据单击属性

我不确定这是否是您所期望的结构，但它似乎已使用正确的数据单击属性正确添加了四个div标记。
我不认为问题出在
查询选择器all
部分。我在代码笔的第103行添加了一个
警报（html.innerHTML）
，以快速查看已构建的html的外观。该
html
变量仅包含三个“数据单击”属性，因此问题似乎在于生成这些html属性

看起来它没有处理第一次数据点击，这也看起来它在json结构中的不同位置，所以这可能是它被忽略的原因

编辑
嗯，这很奇怪，尽管现在，我看到的与您看到的相反，即，我可以在“测试”中看到四个数据单击属性，在“调试”中看到三个数据单击属性

我不确定这是否是您所期望的结构，但它似乎已经用正确的数据单击属性正确地添加了四个div标记。
真的很难弄清楚为什么不先处理
数据单击
，有什么想法吗？我已经将console.log放在
htmleviver
等中，它似乎正在添加属性等…真的很难弄清楚为什么不先处理
数据单击
，有什么想法吗？我已经将console.log放在
htmleviver
等中，它似乎正在添加属性等。。。