Javascript 如何在单击父项时获取子项名称

我有很多这样的搜索结果：

<div id="product-button">
    <p id="product-id">id</p>
    <p id="product-name">name</p>
</div>
<div id="product-button">
    <p id="product-id">id</p>
    <p id="product-name">name</p>
</div>

etc etc

---

元素的id必须是唯一的。用类替换它们

<div class="product-button">
    <p class="product-id">id_1</p>
    <p class="product-name">name_1</p>
</div>
<div class="product-button">
    <p class="product-id">id_2</p>
    <p class="product-name">name_2</p>
</div>

$document.on'click'，'product button'，函数{ console.log`${$this.children.product name.text}${$this.children.product id.text}`； };

id\u 1

name\u 1

id\u 2

名称\u 2

---

欢迎来到SO！您的DOM有一个主要问题：ID必须是唯一的。如果在尝试继续进行之前有相同版本的多个版本，请考虑使用类。@ GoRLLN谢谢，IDS必须是唯一的。到处都是。整个文档中只能有一个id为某物的元素。另外，获取！应该是这个$document.on'click'，'product button'，function{然后是这个$document.on'click'，'product button'，function{？是的，我两个都试过了，但还是得到了！你搞错了我需要的是当我单击父项时，即product button给我子项名称，id@ahmed添加了名称和id

<div class="product-button">
    <p class="product-id">id_1</p>
    <p class="product-name">name_1</p>
</div>
<div class="product-button">
    <p class="product-id">id_2</p>
    <p class="product-name">name_2</p>
</div>

$(document).on('click', '.product-button', function(){

  console.log($(this).children('.product-name').text());

});