jQuery动态加载弹窗失效求助：data-rel属性未被识别

嘿，这个问题我太熟了！你遇到的是jQuery Mobile的一个典型“坑”——动态添加的组件不会自动被框架识别并初始化，和你的div设置关系不大，核心是没告诉jQuery Mobile要处理新生成的popup链接和容器。

为什么会这样？jQuery Mobile在页面首次加载时，会自动扫描并初始化所有已存在的组件（比如带data-rel="popup"的链接、data-role="popup"的容器），但你是通过AJAX请求后动态创建这些元素的，它们不在初始扫描范围内，所以框架根本不知道这些新元素的存在。

给你两个关键修复步骤，直接解决问题：

1. 手动初始化动态创建的Popup容器 #

每次创建完data-role="popup"的div后，必须调用.popup()方法让jQuery Mobile初始化它：

2. 初始化链接的Popup行为 #

动态添加的<a>标签上的data-rel="popup"属性也需要被框架识别，我们可以用.enhanceWithin()方法来处理。

另外还有个隐藏坑：你用item.media.m（图片URL）作为popup的id，URL里的/、.这些特殊字符是不符合HTML id规范的，会导致选择器失效，最好先把这些字符替换成下划线或者其他合法字符。

下面是修改后的完整代码，我已经把这些修复加进去了：

JavaScript代码

$("#button").click(function() {
  var term = $('#term').val();
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON(flickerAPI, {
      tags: term,
      tagmode: "any",
      format: "json"
    })
    .done(function(data) {
      $.each(data.items, function(i, item) {
        // 处理图片URL，生成合法的popup ID
        var safePopupId = 'photo_' + item.media.m.replace(/[^\w]/g, '_');
        
        // 创建popup链接并添加到页面
        var $popupLink = $(`
          <a href="#${safePopupId}" data-rel="popup" data-position-to="window">
            Open pop-up ${i + 1}
          </a><br>
        `);
        $("#theLinks").append($popupLink);
        
        // 创建popup容器和图片
        var $popupContainer = $(`
          <div data-role="popup" id="${safePopupId}">
            <img src="${item.media.m}" alt="Popup Image">
          </div>
        `);
        $("#thePopups").append($popupContainer);
        
        // 手动初始化popup容器
        $popupContainer.popup();
        // 让框架识别链接的popup属性
        $popupLink.enhanceWithin();
        
        if (i === 10) {
          return false;
        }
      });
    });
})();

HTML代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div id="theLinks"></div>
<div id="thePopups"></div>

简单说下原理：

• $popupContainer.popup()：告诉jQuery Mobile“这是一个popup组件，请帮我设置好它的交互逻辑”
• $popupLink.enhanceWithin()：让框架扫描这个链接的data属性，识别出它是一个popup触发器
• 处理ID的合法性：避免因为特殊字符导致jQuery无法正确找到对应的popup容器

这样修改后，动态添加的链接应该就能正常触发popup了！

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