Javascript 单击子div中未捕获的事件

我正在试用一个使用基本HTML、css和JQuery的列表组件。我希望在单击事件时选择列表项。当我单击列表项文本周围的空格（

填充空格

）时，单击事件被捕获。但是，当我单击文本（也是整个

文件名div

占用的空间）时，不会捕获click事件。可能是因为里面的孩子迪夫？任何帮助都将不胜感激。谢谢

函数选择文件（id，键）{
if（$（id）.hasClass（'selected'））{
$（id）.removeClass（'selected'）；
}否则{
$（id）.addClass（'selected'）；
}
}
$（'.file list section'）。在（'click'，函数（事件）{
选择文件（“#”+event.target.id、event.target.dataset.key）；
})

。文件行{
填充：10px；
边框底部：1px实心浅灰色；
光标：指针；
}
.file list节.file-row.selected{
背景：#26a69a；
颜色：白色；
}

cd58ef701e28f6df8.jpg
a682e06e25c5c86.jpg
Jefree copy.jpeg

您应该针对

文件行

进行事件绑定，并使用

此

执行所需的操作

函数selectFile（）{
$（this.toggleClass（'selected'）；
console.clear（）；
console.log（$（this.data（“key”），$（this.find（'.file name'）.text（））；
}
$（'.file list部分'）。在（'单击'，'.file行'，选择文件）

。文件行{
填充：10px；
边框底部：1px实心浅灰色；
光标：指针；
}
.file list节.file-row.selected{
背景：#26a69a；
颜色：白色；
}

cd58ef701e28f6df8.jpg
a682e06e25c5c86.jpg
Jefree copy.jpeg

您的代码集中在整个列表的类上，而不是单独处理每个列表项。我已经简化了jQuery，如果我点击“this”。文件行切换所选的类。这样可以突出显示多个。如果一次只需要一个，请在每次单击时清除所有“选定”类

$（'.file行'）.removeClass（'selected'）；
$（'.file行'）。单击（函数（）{
$（this.toggleClass（'selected'）；
})

。文件行{
填充：10px；
边框底部：1px实心浅灰色；
光标：指针；
}
.file list节.file-row.selected{
背景：#26a69a；
颜色：白色；
}

cd58ef701e28f6df8.jpg
a682e06e25c5c86.jpg
Jefree copy.jpeg

使用以下内容更新脚本

函数选择文件（id，键）{
if（$（id）.hasClass（'selected'））{
$（id）.removeClass（'selected'）；
}否则{
$（id）.addClass（'selected'）；
}
}
$（'.file list section.file row'）。在（'click'，函数（事件）{
选择文件（“#”+$（this.attr（'id'），$（this.data（'key'））；
})

。文件行{
填充：10px；
边框底部：1px实心浅灰色；
光标：指针；
}
.file list节.file-row.selected{
背景：#26a69a；
颜色：白色；
}

cd58ef701e28f6df8.jpg
a682e06e25c5c86.jpg
Jefree copy.jpeg

您传递事件的范围太窄-而是使用键将事件处理程序添加到div中

同时切换类，而不是测试类：

$（'.file行'）。在（'click'，函数（e）上{
$（this.toggleClass（'selected'）；
console.log（$（this.data（“key”））
});
。文件行{
填充：10px；
边框底部：1px实心浅灰色；
光标：指针；
}
.file list节.file-row.selected{
背景：#26a69a；
颜色：白色；
}

cd58ef701e28f6df8.jpg
a682e06e25c5c86.jpg
Jefree copy.jpeg

函数选择文件（id，键）{
if（$（id）.hasClass（'selected'））{
$（id）.removeClass（'selected'）；
}否则{
$（id）.addClass（'selected'）；
}
}
$（'.file list section.file row'）。在（'click'，函数（事件）{
选择文件（“#”+$（this.attr（'id'），$（this.data（'key'））；
})
。文件行{
填充：10px；
边框底部：1px实心浅灰色；
光标：指针；
}
.file list节.file-row.selected{
背景：#26a69a；
颜色：白色；
}

cd58ef701e28f6df8.jpg
a682e06e25c5c86.jpg
Jefree copy.jpeg
文件名上没有ID-单击文件名时需要传递父ID传递元素将比使用
“#”+$（this.attr（“ID”）
创建的选择器更有效。实际上，不传递任何内容，只直接将代码分配给类是最简单的。现在，您的答案与我的答案相同：）啊，我懂了。你确实比我多走了一步