点击nav-item类div无法触发内部a标签点击的jQuery实现问题

问题原因 #

• 你代码中的children()方法仅匹配元素的直接子节点，你的a标签被.item-parent包裹，属于.nav-item的后代节点而非直接子节点，因此无法匹配到目标a标签
• 直接调用jQuery封装的click()方法无法触发a标签的默认跳转行为，需要调用原生DOM节点的点击方法，或直接读取href属性完成跳转

解决方案 #

方案1：直接读取href跳转（兼容性最好）

如果不需要触发a标签上绑定的自定义点击事件，仅需要实现跳转，推荐用这个方案：

$('.nav-item').click(function () {
  const targetUrl = $(this).find('a').attr('href');
  if (targetUrl) {
    window.location.href = targetUrl;
  }
});

如果你的a标签配置了target="_blank"新窗口打开，把跳转逻辑改成window.open(targetUrl)即可。

方案2：触发a标签原生点击事件

如果需要同时触发a标签上绑定的所有自定义点击事件，用这个方案：

$('.nav-item').click(function () {
  // get(0) 从jQuery对象中取出原生DOM节点，调用原生click方法
  $(this).find('a').get(0).click();
});

这个方案会自动兼容a标签的target等原生属性配置。

内容的提问来源于stack exchange，提问作者code 8