HTML页面卡片首个带onclick事件的span点击失效问题求助

核心故障排查点 #

• id重复问题：如果你的循环变量i从0开始，第一张卡片对应的模态框id为myModal0，请先打开浏览器开发者工具的元素面板，搜索该id确认是否存在重复。页面内id重复会导致document.getElementById仅返回第一个匹配的元素，触发逻辑异常。
• 元素遮挡问题：使用开发者工具的元素选择器点击第一张卡片的关闭按钮、Stream链接，确认选中的元素是否为目标元素。如果被其他fixed/absolute定位的透明元素遮挡，会导致点击事件无法触发到目标元素。
• Jade插值不稳定问题：你当前在属性字符串内使用#{i}的插值写法兼容性较差，部分场景下i=0时会出现解析异常。

修复方案 #

1. 修正Jade插值写法，替换为更稳定的动态属性拼接：

div(id="myModal" + i class="modal")
  div(class="modal-content")
    span(class="close" onclick="closeMoviePopup(" + i + ")") ×
    h2= movie.name
    a(href="sodaplayer:?url=" + movie.magnet_link + "&title=" + movie.name onclick="(function(){ document.getElementById('myModal" + i + "').style.display = 'none'; })();return true;") Stream

2. 可进一步简化内联逻辑，抽离公共函数避免重复代码：

// 新增公共函数
function handleStreamClick(index) {
  document.getElementById('myModal' + index).style.display = 'none';
  return true;
}

对应修改Jade的a标签部分：

a(href="sodaplayer:?url=" + movie.magnet_link + "&title=" + movie.name onclick="return handleStreamClick(" + i + ")") Stream

3. 如果存在元素遮挡问题，给卡片模态框添加样式z-index: 999，提升层级避免被覆盖。

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