点击span元素后如何获取其子元素的innerText？原.val()方法失效问题

先修正原代码的两个核心问题：

1. 选择器错误：被点击的元素本身就是.info类的span，它的子元素不带.info类，所以$(this).children(".info")的查找逻辑不成立。
2. 文本获取方法错误：span元素没有value属性，.val()仅适用于表单元素，必须改用文本获取方法。

方法一：使用原生JS的innerText #

$('#result').on('click', '.info', function() {
  // 获取当前点击元素的子span
  const childSpan = this.querySelector('span');
  // 用innerText获取文本，trim去除前后空格
  const search = childSpan.innerText.trim();
  // 此时search的值为Child 1或Child 2
  console.log(search);
});

方法二：结合jQuery的文本获取方法（适配你的代码环境） #

$('#result').on('click', '.info', function() {
  // 用jQuery的.text()获取子span的文本，trim去除空格
  const search = $(this).children('span').text().trim();
  console.log(search);
});

补充说明 #

• 把事件委托的选择器从span改为.info，可以精准绑定外层目标元素，避免点击内部子span时误触发事件。
• 使用trim()是为了去除HTML中子span文本前后的空白字符，确保得到干净的Child 1/Child 2。

内容的提问来源于stack exchange，提问作者Bora Özçağlar