jQuery do-while动态生成DOM 点击获取class异常问题

问题成因 #

• 事件绑定时机完全错误：页面初始化执行var jaqSelected = $("a.prez_col-" + i);时，i还未赋值，选择器本身无效，且此时viewPoster()还未执行，DOM中不存在任何动态生成的海报链接，根本选不到目标元素。另外jQuery选择器返回的是执行瞬间的静态元素集合，不会随着后续DOM更新自动同步，就算后续生成了对应元素，之前绑定的事件也不会生效。
• 内联onclick报错原因：你的脚本是通过type="module"加载的ES模块，模块内声明的函数默认在模块作用域，不会挂载到全局window对象，内联onclick="test()"执行时找不到全局test函数，直接抛出引用错误。
• HTML规范违反：循环生成的所有a标签都用了同一个idprez_jaquetteDiv，id在HTML中必须全局唯一，重复id会引发DOM查询、事件触发的异常。
• 逻辑bug：viewPoster里的do-while循环边界错误，循环到最后会读取下标等于data.length的不存在项，触发下标越界错误；且每次循环都执行一次.html()写入DOM，触发不必要的多次重绘，性能很差。

修复方案 #

核心用jQuery事件委托解决动态元素绑定问题：把事件绑定到页面初始化时就已经存在的父容器#prez_choiseJaq上，指定后代元素选择器匹配触发目标，不管目标元素是初始存在还是后续动态生成，都能正常响应事件。

具体修改代码如下：

1. 替换原有的无效点击绑定，改用事件委托，写在getValue.js的初始化区域即可：

// 删除原有的 var jaqSelected = ... 和 jaqSelected.click(...) 代码，替换为下面的委托绑定
$("#prez_choiseJaq").on("click", "a.prez_item", function(e) {
    e.preventDefault();
    // 直接通过this拿到当前点击的DOM元素，读取class列表
    const targetClass = Array.from(this.classList).find(cls => cls.startsWith("prez_col-"));
    const itemIndex = targetClass ? targetClass.split("-")[2] : null;
    // 直接拿到对应电影数据，不需要额外DOM查询
    const selectedMovie = data[itemIndex];
    console.log("选中元素class：", this.className, "对应电影数据：", selectedMovie);
    alert(`已选中电影：${selectedMovie.title}`);
});

2. 修复viewPoster函数的循环、DOM写入、重复id问题：

function viewPoster() {
    test = false;
    if (!data?.length) return;
    const template = []; // 用数组拼接字符串性能更好
    jaq.style.display = "inline-grid";
    // 修正循环边界，从0遍历到数组最后一位，避免下标越界
    for (let i = 0; i < data.length; i++) {
        const condJaq = data[i].poster_path == null ? urlNoCover : `${urlJaq}${data[i].poster_path}`;
        // 移除重复id，新增公共class prez_item用于事件匹配，保留动态prez_col-i类名
        template.push(`
<a href="#" class="prez_item prez_col-${i}">
    <p class="prez_title">${data[i].title}</p>
    <img src="${condJaq}" class="prez_jaquette" />
</a>`);
    }
    // 循环结束后一次性写入DOM，只触发一次重绘
    $("#prez_choiseJaq").html(template.join(""));
}

优化提示：如果不需要依赖class传索引，可以在生成a标签时直接加data-index="${i}"属性，点击时直接通过this.dataset.index拿到索引，比解析class更稳定高效。

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