JQuery Mobile 样式未保留在 .load() 的 html 内容中答案

【问题标题】：JQuery Mobile styling not retained on html content from .load()JQuery Mobile 样式未保留在 .load() 的 html 内容中
【发布时间】：2014-06-05 06:56:20
【问题描述】：

我在互联网上搜索了解决方案，但没有一个对我有用。

我正在使用 JQuery Mobile + PHP 和 Phonegap 创建一个混合移动应用程序。当我尝试插入动态内容时，JQuery Mobile 样式不会应用于返回的 html 内容。

这是我正在使用的：

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-    scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Barslide</title>

<link rel="stylesheet" href="themes/Barslide-swatches.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="themes/main.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

<script>
$(document).on('pageinit', "#home", function() {
$("#home-bar-list-friends").load("php/home-bar-list-friends.php");
$("#home-bar-list-friends").listview("refresh");

});
</script>

</head>
<body>

...

<ul id="home-bar-list-friends" data-role="listview" data-inset="true" data-theme="b">
</ul>

PHP 脚本：php/home-bar-list-friends.php - 用于测试的静态内容

<?php
echo 
'
  <li><a href="bar.html?id=100">101 Cantina | 11</a></li>
  <li><a href="bar.html?id=101">Grogg House | 9</a></li>
  <li><a href="bar.html?id=102">Tall Pauls | 7</a></li>
  <li><a href="bar.html?id=103">08 Seconds | 4</a></li>
  <li><a href="bar.html?id=104" rel="external">The Swamp | 2</a></li>
</ul>';
?>

【问题讨论】：

我还注意到alert()等其他命令不会执行

标签： php jquery-mobile cordova

【解决方案1】：

我解决了。我没有包含创建事件。

$(document).on('pagebeforeshow', '#bars', function(){   
$('#bars-list').empty();
$.post('php/bars-list.php',function(bars)
{
    $('#bars-list').append(bars);
    $('#bars-list').trigger('create');
    $('#bars-list').listview('refresh');
})  
});

【讨论】：