点击弹出框时如何从a href标签获取id值并传入弹窗

看起来你遇到的核心问题有两个：一是$(document).ready里的代码根本没执行，二是点击事件无法把ID传到弹窗输入框。我来一步步帮你排查解决：

首先，排查为什么$(document).ready没触发 #

最常见的原因是jQuery没有正确加载，或者加载顺序错误。因为你用了jQuery Mobile，必须先加载jQuery核心库，再加载jQuery Mobile，否则所有依赖jQuery的代码都会失效。

请确保你的脚本加载顺序是这样的：

<!-- 先加载jQuery核心库 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 再加载jQuery Mobile -->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- 别忘了加载jQuery Mobile的样式 -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

另外，jQuery Mobile推荐用pagecreate事件代替$(document).ready，因为它的AJAX页面加载机制会导致ready事件在页面元素未完全渲染时就触发，改用pagecreate能确保元素都已就绪。

然后，正确绑定弹窗事件传递ID #

jQuery Mobile的弹窗有自己的生命周期事件，直接绑定普通click事件可能会被它的内部处理拦截。我们可以用popupbeforeopen事件，在弹窗即将打开时把ID赋值给输入框，同时用事件委托处理动态生成的a标签：

修改后的jQuery代码 #

$(document).on("pagecreate", function() {
    console.log("页面已初始化"); // 用console.log代替alert，调试更方便
    
    // 存储当前点击的视频ID
    let currentVidId = "";
    
    // 用事件委托绑定所有带data-rel="popup"的a标签点击事件
    $(document).on("click", "a[data-rel='popup']", function() {
        currentVidId = $(this).attr("id");
        console.log("当前点击的视频ID：", currentVidId);
    });
    
    // 在弹窗打开前，把ID赋值给vids输入框
    $("#myPopup").on("popupbeforeopen", function() {
        $("#vids").val(currentVidId);
    });
});

更简洁的写法（直接从弹窗触发元素获取ID） #

如果你不想额外存储ID，也可以直接在popupbeforeopen事件里获取触发弹窗的元素：

$(document).on("pagecreate", function() {
    $("#myPopup").on("popupbeforeopen", function(event, ui) {
        // 获取触发弹窗的a标签
        const triggerLink = ui.prevPage.find("a[data-rel='popup'][href='#myPopup']:visible");
        if (triggerLink.length) {
            const vidId = triggerLink.attr("id");
            $("#vids").val(vidId);
            console.log("已设置视频ID：", vidId);
        }
    });
});

为什么原来的代码不生效？ #

1. 事件绑定时机不对：动态生成的a标签在$(document).ready执行时可能还没被渲染到DOM里，直接$("a").click()绑定不到这些元素，事件委托能解决这个问题。
2. jQuery Mobile的弹窗拦截：普通click事件会被jQuery Mobile的弹窗初始化逻辑拦截，导致你的自定义click事件无法正常触发，用它自带的popupbeforeopen事件更可靠。
3. 初始化事件错误：$(document).ready不适合jQuery Mobile的页面加载机制，pagecreate才是官方推荐的页面初始化事件。

最后检查步骤 #

1. 打开浏览器控制台（F12），查看有没有jQuery is not defined这类错误，如果有，说明jQuery没加载成功。
2. 测试点击a标签，查看控制台是否输出了视频ID，确认事件是否触发。
3. 打开弹窗，检查vids输入框是否已填充对应的ID。

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