如何为动态加载div内的元素应用jQuery Mobile CSS样式？

你遇到的核心问题很明确：通过AJAX动态加载的内容里，jQuery Mobile的组件没有被自动初始化——主页面的jQuery Mobile只会在初始DOM加载时处理组件，新添加的元素不会触发默认的样式渲染和功能初始化，这就是为什么删除按钮显示成了带"Icon only"文本的普通按钮，而非预期的圆形图标按钮。

而且你担心重复加载资源的顾虑完全正确，getusers.php里根本不需要重复引入jQuery Mobile的样式或脚本，主页面已经加载过的资源可以直接复用。

解决方案：手动触发jQuery Mobile组件初始化 #

在你的script.js中，利用load()方法的回调函数，在内容加载完成后，对目标容器触发create事件，让jQuery Mobile扫描并初始化新添加的组件。

修改后的script.js代码：

$(document).ready(function() {
    $('button.getusers').click(function() {
        $("#dynamicUserTable").load("getusers.php", function() {
            // 对加载完成的内容触发create事件，初始化jQuery Mobile组件
            $(this).trigger('create');
        });
    });
});

优化getusers.php中的按钮代码 #

你可以调整按钮的写法，更贴合jQuery Mobile的推荐方式（用<a>标签代替<input>，结构更简洁）：

echo "<td>";
echo '<a href="#" data-role="button" data-icon="delete" data-iconpos="notext" onclick="deleteUser(\'' . $row["userID"] . '\')"></a>';
echo "</td>";

如果坚持使用<input>按钮，也可以去掉多余的包裹div，jQuery Mobile会自动生成必要的容器结构：

echo "<td>";
echo '<input type="button" data-icon="delete" data-iconpos="notext" value="Icon only" onclick="deleteUser(\'' . $row["userID"] . '\')">';
echo "</td>";

为什么这个方法有效？ #

在你使用的jQuery Mobile 1.1.1版本中，trigger('create')会通知框架重新解析目标元素内的所有内容，自动将带有data-role等属性的元素转换成对应的jQuery Mobile组件，包括渲染按钮的图标和样式。这样既避免了重复加载资源，又让动态内容的组件正常工作。

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