如何将循环生成列表的data-id传递到模态框并在关闭时清除

问题排查 #

你当前的传值代码失效的核心原因是jQuery选择器书写错误：模态框的id是myModal，id选择器需要加前缀#，原代码写的$("myModal")会匹配标签名为myModal的元素，自然找不到目标，事件绑定不生效。

完整实现代码 #

你只需要替换原有模态框相关的JS代码为以下内容即可同时满足「打开传值」和「关闭清空」两个需求：

// 1. 模态框打开时传递data-id
$("#myModal").on("show.bs.modal", function(e) {
    // 获取触发当前模态框的链接元素
    const trigger = $(e.relatedTarget);
    // 读取链接上绑定的data-id
    const targetId = trigger.data("id");
    // 赋值给模态框内的#me元素
    $(this).find("#me").text(targetId);
});

// 2. 模态框完全关闭时清空data-id
$("#myModal").on("hidden.bs.modal", function() {
    $(this).find("#me").text('');
});

注意事项 #

• 上述代码依赖Bootstrap自带的模态框事件，只要你的项目已经正确引入jQuery和Bootstrap的JS文件即可正常运行
• 事件绑定在静态存在的模态框元素上，和你动态渲染的表格内容没有耦合，不需要修改现有的fetch渲染逻辑

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