JQM动态生成href标签失效：XML提取数据后无法跳转至page页面

我帮你排查了代码里的几个关键问题，这些正是导致链接无法正常工作的核心原因：

问题分析 #

1. 页面结构违规：jQuery Mobile的data-role="page"必须是<body>的直接子元素，绝对不能嵌套在<ul>或<li>这类容器里。你把动态页面放到了#test列表的列表项中，直接破坏了JQM的页面导航机制，系统根本识别不到这些是合法的跳转目标。
2. HTML标签错误：生成链接的代码里，<a>标签的闭合用了</div>，这属于语法错误，会导致链接元素无法被浏览器正常解析。
3. 属性拼写错误：你的列表用了date-role="listview"，正确属性是data-role="listview"（多打了一个t），这会让JQM无法初始化列表视图组件，链接的样式和导航功能都会失效。
4. 动态内容未初始化：通过AJAX动态添加的列表项和页面，JQM不会自动识别并初始化它们，必须手动触发组件刷新才能激活功能。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Jquery mobile</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        console.log("starting...");
        var xml;

        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "lolcatz.xml",
                dataType: "xml",
                success: xmlParser
            });
        });

        function xmlParser(data) {
            xml = data;
            $(xml).find("kitteh").each(function () {
                var kitteh = $(this);
                var name = kitteh.find("name").text();
                var src = kitteh.find("url").text();
                
                // 处理name格式，确保页面id合法
                name = name.replace(/\s+/g, '').toLowerCase();
                
                // 生成列表项并添加到列表
                $("#myList").append('<li><a href="#' + name + '">' + name + '</a></li>');
                
                // 生成独立的JQM页面，直接追加到body
                $('<div data-role="page" id="' + name + '">' +
                    '<div data-role="header"><a href="#" data-rel="back">返回</a><h1>' + name + '</h1></div>' +
                    '<div data-role="content"><img src="' + src + '" alt="Image"></div>' +
                  '</div>').appendTo('body');
            });
            
            // 刷新列表视图，让JQM初始化新添加的列表项
            $("#myList").listview("refresh");
            
            // 初始化所有新添加的页面，确保JQM识别它们
            $("[data-role='page']").page();
        }
    </script>

    <!-- 主页面 -->
    <div data-role="page" id="mainPage">
        <div data-role="header">
            <h1>猫咪列表</h1>
        </div>
        <div class="content-primary">
            <div data-demo-html="true">
                <ul data-role="listview" id="myList" data-inset="true">
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

关键改动说明 #

1. 调整页面结构：把动态生成的data-role="page"页面直接追加到<body>，保证JQM能正确识别这些跳转目标页面。
2. 修复标签闭合：将链接的错误闭合标签</div>修正为</a>，确保HTML语法合法。
3. 修正属性拼写：把date-role改为正确的data-role，让列表视图组件正常初始化。
4. 添加组件初始化：调用$("#myList").listview("refresh")刷新列表，激活新添加项的样式和功能；调用$("[data-role='page']").page()确保新页面被JQM初始化。
5. 增强用户体验：给动态页面添加了头部和返回按钮，让导航逻辑更完整。

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