Jquery mobile collapsible在ajax get中不起作用
Posted
技术标签:
【中文标题】Jquery mobile collapsible在ajax get中不起作用【英文标题】：Jquery mobile collapsible doesn't work in ajax get 【发布时间】：2017-02-20 11:39:19 【问题描述】：Jquery mobile data-role="collapsible" 不适用于 ajax get。你可以在下面找到我的代码。这是我打开页面时的问题，可折叠数据显示在一个块中。我错过了什么我真的需要帮助。 谢谢
<html lang="fr">
<head>
<!-- Carracteres -->
<meta charset="utf-8">
<!-- Carracteres -->
<!-- Desactiver le zoom -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<!-- Desactiver le zoom -->
<!-- CSS Animation -->
<link rel="stylesheet" href="css/stylish-portfolio.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/jquery.mobile.css">
<!-- CSS Animation -->
</head>
<body>
<div class="loader"></div>
<!-- Page d'accueil -->
<div data-role="page" class="touch" style="width:100%;background:#000;" id="indexpage">
<div class="topbardiv"><p style="color: #fff;font-size: 18px;line-height: 44px;">A venir</p></div>
<div style="height:46px;"></div>
<!-- Text -->
<div style="background-color:#000;" id="avenir"></div>
<!-- Text -->
<a href="#right-panel" data-icon="arrow-l" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc"><img class="animated infinite pulse" style="height: 19px;padding: 6.25px 6.25px 6.5px 6.5px;position: fixed;top: 5;right: 5;z-index: 9999999999;" src="img/menu.png"></a>
<div data-role="panel" id="right-panel" data-display="push" data-position="right">
<li>
<div class="logomenudiv"><img class="logomenu" src="img/logo.png"></div>
</li>
<li>
<p onclick = $("#menu-close").click();location.href='#qui_popup'; style="padding-top: 10px;padding-left: 10px;"><i class="fa fa-users" aria-hidden="true"></i> Le CAFÉ THÉÂTRE</p>
</li>
<li>
<p onclick = $("#menu-close").click();location.href='#tarifs_popup'; style="padding-left: 10px;"><i class="fa fa-ticket" aria-hidden="true"></i> Tarifs et abonnements</p>
</li>
<li>
<p onclick = $("#menu-close").click();location.href='#tapas_popup'; style="padding-left: 10px;"><i class="fa fa-glass" aria-hidden="true"></i> Tapas et Cocktails</p>
</li>
<li>
<p onclick = $("#menu-close").click();location.href='#venir_popup'; style="padding-left: 10px;"><i class="fa fa-map-marker" aria-hidden="true"></i> Venir au CAFÉ THÉÂTRE</p>
</li>
<div style="margin-top: 25px;text-align: center; width:100%;">
<a href="tel:0651809690" style="display:inline"><img src="img/tel.png" style="width: 45px;"></a>
<a href="mobincube://action/sms/0651809690%20Bonjour%2C" id="doubleLink" style="display:inline"><img src="img/twitter.png" style="width: 45px;"></a>
<a href="mailto:defoncederire@gmail.com" style="display:inline"><img src="img/mail.png" style="width: 45px;"></a>
<a href="mobincube://action/browser/https%3A%2F%2Fwww.facebook.com%2Fdefoncederire%2F%3Ffref%3Dts" style="display:inline"><img src="img/facebook.png" style="width: 45px;"></a>
<a href="mobincube://action/browser/http%3A%2F%2Fwww.defoncederire.com%2F" style="display:inline"><img src="img/internet.png" style="width: 45px;"></a>
</div><!-- /panel -->
</div>
</div>
<!-- Page d'accueil -->
<!-- Qui sommes nous popup -->
<div data-role="page" class="touch" style="width:100%;background:#000;" id="qui_popup">
<div class="topbardiv"><p style="color: #fff;font-size: 18px;line-height: 44px;">Défonce de Rire</p></div>
<div style="height:46px;"></div>
<!-- Text -->
<div style="height:100%;width;100%;background:#000;">
<img src="img/1.jpg" >
<div style="padding:10px;background:#000;">
<p style="text-align:center;">Horaires des Spectacles<br>
Du mercredi au samedi : 20h00<br>
Dimanche : 15h00<br>
<br>
*Ouverture des portes 1h00 avant le début du spectacle<br>
*Fin du service 15 minutes avant le début du spectacle<br>
+ Restez après le spectacle, le bar ouvre de nouveau et profitez d'un moment pivilégié avec les comédiens<br></p>
</div>
</div>
<!-- Text -->
<div onclick="location.href='#indexpage';" class="bttt1">
<img style="position: fixed;top: 0;right: 0;z-index: 1;height: 19px;padding: 11.25px 11.25px 6.5px 6.5px;" src="img/exit.png">
</div>
</div>
<!-- Qui sommes nous popup -->
<!-- Tapas popup -->
<div data-role="page" class="touch" style="width:100%;background:#000;" id="tapas_popup">
<div class="topbardiv"><p style="color: #fff;font-size: 18px;line-height: 44px;">Tapas et Cocktail</p></div>
<div style="height:46px;"></div>
<!-- Text -->
<h2>Boissons</h2>
<img src="img/Boissons_defonce_de_rire.png" style="width:100%">
<td>
<p><strong>Pina Colada ou Mojito : 6,5€<br></strong><span style="font-size: 8pt;"><strong></strong></span><strong><br></strong><br><strong>Sirop à L'eau : 1.50€<br></strong><span style="font-size: 8pt;"><span style="font-size: 8pt;">Fraise, Menthe, Grenadine, Pêche</span><em><em>, Citron, Lichi</em></em><em><br></em></span><strong>Diabolo : 2.00€<br></strong><span style="font-size: 8pt;">Fraise, Menthe, Grenadine, Pêche</span><em><em>, Citron, Lichi<br></em></em><strong>Jus de Fruits : 2.50€</strong><em><em><br></em></em><span style="font-size: 8pt;">Orange, Tomate, ACE, Ananas, Fraise, Abricot, Lichi</span><br><strong>Sodas : 2.50€</strong><strong><br></strong><span style="font-size: 8pt;">Coca-Cola, Ice-Tea, Perrier, Orangina, Limonade</span><br><strong>Bières bouteille : 3.50€</strong><br><span style="font-size: 8pt;">Guiness, Leffe, Corona, Desperados, Hoegaarden</span><br><strong>Kir : 4.00€<br></strong><span style="font-size: 8pt;">Mûre, </span>cassis, violette<br><strong>Kir Royal : 5€<br><br>Vin Rouge/Rosé/Blanc au verre : 3.5€<br>Vin <strong>Rouge/Rosé/Blanc</strong> à la Bouteille : 15€</strong><br><span style="font-size: 8pt;"></span></p>
<p><strong>Thé et Tisane: 2€</strong><br><span style="font-size: 8pt;">Choisissez votré parfum dans notre Coffret de saveurs variées.</span><br><br><strong>Café : 2€</strong><br><span style="font-size: 8pt;">Café double expresso artisanal ou café allongé </span><br><strong> </strong></p>
</td>
<td>
<p><strong>A Grignoter : 6€</strong></p>
<p><span style="font-size: 8pt;">Tapenades diverses + Olives<br></span></p>
<p><span style="font-size: 8pt;"> </span></p>
<p><strong><span style="font-size: 8pt;">Chiffonade de Jambon Cru : 6<strong>€</strong></span></strong></p>
<br>
<h2>Tapas</h2>
<img src="img/tapas_defonce_de_rire.png" style="width:100%">
<p><span style="font-size: 14pt;"><strong>Les Plateaux Gourmands :</strong></span></p>
<p><em><strong><br>Le Grand Fromager : 18€<br></strong></em><span style="font-size: 8pt;">Assortiment de 5 fromages d'Auvergne </span><em><span style="font-size: 8pt;"><strong><br><br></strong></span><strong>L'auvergnat : 18€</strong><span style="font-size: 8pt;"><strong><br></strong></span></em><span style="font-size: 8pt;">Ass</span><span style="font-size: 8pt;">ortiment de fromages et charcuteries</span><em><br></em><em><br><strong>Plateau Végétarien : 18<em><strong>€</strong></em></strong><br>(Sur commande 24 heures avant le spectacle ) </em></p>
<p><span style="font-size: 14pt;"><strong>La touche sucrée :</strong></span></p>
<p><strong>Café/Thé/Chocolat Gourmand : 6,5€</strong><br>Café, thé ou chocolat accompagné de douceurs sucrées</p>
</td>
<!-- Text -->
<div onclick="location.href='#indexpage';" class="bttt1">
<img style="position: fixed;top: 0;right: 0;z-index: 1;height: 19px;padding: 11.25px 11.25px 6.5px 6.5px;" src="img/exit.png">
</div>
</div>
<!-- Tapas popup -->
<!-- Tarifs et abonnements popup -->
<div data-role="page" class="touch" style="width:100%;background:#000;" id="tarifs_popup">
<div class="topbardiv"><p style="color: #fff;font-size: 18px;line-height: 44px;">Tarifs et abonnements</p></div>
<div style="height:46px;"></div>
<!-- Text -->
<div style="width;100%;background:#000;text-align:center;">
<p style="font-size: 20px;font-weight: bold;">TARIFS BILLETTERIE :</p>
<img src="img/theatre.jpg" style="width:30%">
<p>-Plein Tarif : 14 €<br>-Tarif Réduit : 11 €</p>
<p style="font-size: 20px;font-weight: bold;">TARIFS ABONNEMENTS :</p>
<img src="img/defonce_de_rire_ABONNEMENTS_copie.jpg" style="width:30%">
<p>Carte 10 Spectacles : 105 €<br>
<p style="font-size: 20px;font-weight: bold;">TARIFS PASS SPECTACLES :</p>
<img src="img/pass_rire.jpg" style="width:30%">
<p>Pass Soirée : <br>-2 Personne (2 entrées spectacle + 1 Plateau 2 pers + 2 Boissons) : 50 €</p><br>
</div>
<!-- Text -->
<div onclick="location.href='#indexpage';" class="bttt1">
<img style="position: fixed;top: 0;right: 0;z-index: 1;height: 19px;padding: 11.25px 11.25px 6.5px 6.5px;" src="img/exit.png">
</div>
</div>
<!-- Tarifs et abonnements popup -->
<!-- Venir au café popup -->
<div data-role="page" class="touch" style="width:100%;background:#000;" id="venir_popup">
<div class="topbardiv"><p style="color: #fff;font-size: 18px;line-height: 44px;">Venir au café</p></div>
<div style="height:46px;"></div>
<!-- Text -->
<div style="height:100%;width;100%;background:#000;">
<img src="img/0.jpg" >
<div style="padding:10px;background:#000;height:80%">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1654.556672009112!2d3.0785118565539458!3d45.77877426203212!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47f71bdc9faf1b73%3A0x5f6b2507363449a8!2zRMOpZm9uY2UgZGUgUmlyZSAtIENhZsOpIFRow6nDonRyZQ!5e0!3m2!1sfr!2sfr!4v1466777862750" frameborder="0" style="border:0" allowfullscreen></iframe>
<div onclick="location.href='mobincube://action/route/45.7783992%2C3.0795084999999744%20Defonce%20de%20Rire';" class="venir">Venir au Café Théâtre</div>
</div>
</div>
<!-- Text -->
<div onclick="location.href='#indexpage';" class="bttt1">
<img style="position: fixed;top: 0;right: 0;z-index: 1;height: 19px;padding: 11.25px 11.25px 6.5px 6.5px;" src="img/exit.png">
</div>
</div>
<!-- Venir au café popup -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.js"></script>
<!-- jQuery -->
<!-- Chargement -->
<script type="text/javascript">
$(window).load(function()
$(".loader").fadeOut("slow");
)
$.ajaxSetup (
cache: false
);
</script>
<!-- Chargement -->
<script>
document.getElementById("doubleLink").onclick = function ()
window.open("sms:0651809690", "", "width=640,height=400");
</script>
<script>
$(document).ready(
function()
$.ajax(
type: "GET",
url: "http://s604712774.onlinehome.fr/cafetheatre/doc.xml",
dataType: "xml",
success: function(xml)
$(xml).find('avenir').each(
function()
var titre = $(this).find('titre').text();
var photo = $(this).find('photo').text();
var courtedesc = $(this).find('courtedesc').text();
var lien = $(this).find('lien').text();
var date = $(this).find('date').text();
$('<div style="background:#000;text-align: center;margin-left: 10px;margin-right: 10px;margin-top: 10px;margin-bottom: 10px;border-bottom: solid 1px #fff;"><p style="text-align: center;">' +date+ '</p><img src="' +photo+ '"><h2 style="text-align: center;font-size: 16px;padding-top: 5px;color: #ff0000;padding-bottom: 5px;">' +titre+ '</h2><div data-role="collapsible"><h4>Voir le résumé</h4><p class="body1010" style="margin-bottom:10;">' +courtedesc+ '</p></div></div>').appendTo('#avenir');
);
);
);
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：首先，使用 jQM 的 pagecreate 事件而不是常规的 jQuery 文档准备。
$(document).on("pagecreate","#page1", function()
//ajax get goes here
其次，jQM 增强了可折叠创建内容 div 类 .ui-collapsible-content
因此将内容插入该类，例如：
$("#avenir .ui-collapsible-content").append("<div>Inserted from AJAX call</div>");
$("#avenir").enhanceWithin();
【讨论】：
以上是关于Jquery mobile collapsible在ajax get中不起作用的主要内容，如果未能解决你的问题，请参考以下文章