AEM页面导航：锚标签失效，JS跳转不稳定，新手求助

问题根源分析 #

• HTML规范明确禁止<a>标签嵌套<button>，浏览器解析这类代码时容易出现异常，导致跳转失效。
• 你之前的JS代码存在两个关键问题：按钮是class="add-ticket"，但JS用了getElementById('add-ticket')，根本无法匹配到元素；另外AEM页面常有组件异步加载的情况，DOMContentLoaded事件触发时目标按钮可能还未渲染完成，导致事件绑定失败。

三种可行解决方案 #

1. 纯HTML合规方案（推荐，保留原生特性） #

放弃嵌套写法，直接给<a>标签添加按钮样式来替代<button>，完全符合HTML规范，同时保留新标签页打开、右键菜单等原生跳转特性：

<a href="/content/travel/us/en/addticket.html" class="add-ticket button-link">
  <span> ADD LEADS </span>
</a>

只需在CSS中为这个<a>标签设置按钮样式即可，比如调整内边距、背景色、边框等属性。

2. 修复后的JavaScript方案 #

修正选择器错误，同时改用事件委托适配AEM的动态加载场景：

// 事件委托：监听全局点击，避免元素未加载的问题
document.addEventListener('click', function(e) {
  // 检查点击目标是否为按钮或按钮内部元素
  if (e.target.closest('.add-ticket')) {
    window.location.href = "/content/travel/us/en/addticket.html";
  }
});

如果坚持使用元素直接绑定，也可以修正选择器并确保元素加载完成：

document.addEventListener('DOMContentLoaded', function(){
  // 用querySelector匹配class对应的元素
  const addticketbutton = document.querySelector('.add-ticket');
  if(addticketbutton){
    addticketbutton.addEventListener('click', function(){
      window.location.href = "/content/travel/us/en/addticket.html";
    });
  }
});

3. AEM原生组件方案（最佳实践） #

作为AEM开发者，更推荐使用Core Components中的Link组件：

• 在AEM编辑器中添加Link组件，直接选择站点内的目标页面配置跳转地址。
• 给Link组件添加自定义CSS类add-ticket button-link，使其呈现按钮样式。
  这种方式符合AEM内容管理逻辑，支持链接校验、本地化等原生功能，无需手写原生代码。

内容的提问来源于stack exchange，提问作者def init