私はJQMサイトで作業していますが、非常に奇妙なことが起こっており、何が原因かわかりません。
この問題は、ajaxを介してロードされたページでJQMデータ遷移の1つを使用しようとすると発生します。私のプロセスは次のとおりです。リンクがクリックされると、Ajaxを使用してコンテナーdivを書き換え、表示されるデータが動的になるようにし、JQMを使用して遷移を処理します。
以下は私のコードです：
<script type="text/javascript">
function setContent(command,value,url,target){
$.ajax({
url: url,
type: "post",
data: 'value='+value+'&command='+command,
beforeSend: function() {
$.mobile.loading('show');
},
success: function(response, textStatus, jqXHR){
console.log("sucess");
replaceHtml(target,response);
},
error: function(jqXHR, textStatus, errorThrown){
console.log("error occured:"+textStatus, errorThrown);
},
complete: function(){
$.mobile.loading('hide'); //;
//$.mobile.changePage( "about/us.html", { transition: "flip"} );
}
});
}
function replaceHtml(object,html){
$(object).html();
$(object).html(html);
}
function checkhash(){
if ($('#loadedpage').html() == '') document.location.href = "#home";
}
//$(function(){
$(document).live('pageinit', function(){
checkhash();
$(".navlink").live("click", function() {
var command = $(this).data("command");
var value = $(this).data("value");
var url= $(this).data("url");
var target = $(this).attr("href");
//alert(command+" "+value+" "+url+" "+target);
setContent(command,value,url,target);
});
});
</script>
.navlinkをクリックすると、ターゲットdivに配置されたhtmlを返すprocess.phpにajaxします。この場合のターゲットdivも、JQMが移行しようとしているのと同じリンクです。以下のリンク例を参照してください。
<a href="#loadedpage" class="navlink rollover" data-transition="flip" data-command="query" data-value="colors" data-url="process.php">Pick a Color</a>
「#loadedpage」はコンテナdivです。遷移のどれもトリガーされていないように見えるという事実を除いて、すべてが適切に機能しているようです。リンクをクリックすると、ページが点滅し、新しいコンテンツが表示されます。何が欠けているのか正確にはわかりません。私は一日中ウェブを検索して、何が間違っているのかを突き止めようとしています。
JQuery1.8.2でJQM1.2.0を使用しています
奇妙な効果は、最初にページをロードしたときに、「＃home」ページにあるすべてのトランジションが機能しているように見えることです... ajaxを介してページに追加されたリンクをクリックしようとすると、トランジションが失敗します。DOMに新しいコンテンツを追加する方法が間違っていると思います。おそらく、JQMがコンテンツを適切に初期化できないのでしょうか。
助けてください：D
編集：
私が今気付いたもう1つのことは、ajaxを介してJQMデータ属性をロードすると、どのJQMデータ属性も機能していないように見えることです。以下のコードは、コンテンツの生成に使用したPHPスクリプトから取得したものです。
function makeHeader(){
return "<div id='menubar' data-position='fixed' data-role='header' data-tap-toggle='false'>
<table width='100%' cellspacing='0px' cellpadding='0px' border='0px'>
<tr><td width='12%'>
<a href='#home' data-transition='flip'>
<img src='/images/menu_button.png'>
</a>
</td>
<td width='90%'>
<img src='/images/menu_bar.png'>
</td>
</tr>
</table>
</div>";
}
「data-fixed」はまったく機能していないようです。ヘッダーはレンダリングされますが、他の要素のようにページの上部にアタッチされるだけで修正されません。少し検索したところ、.trigger（'create'）を使用してJQMに要素を強制的に再ロードさせる方法があることがわかりました。これによりヘッダーは修正されましたが、トランジションは修正されませんでした。
編集：
まだJQMと戦っています。JQMのchangepage（）メソッドを介してajaxフラグメントをロードすると、遷移が無視されない可能性があると考えて、小さな変更を加えました。それでも機能しません:(...これを引き起こしている可能性があるものについて私は非常に混乱しています。
コードへの変更：
function specialsetContent(command,value,url,target,effect){
$.ajax({
url: url,
type: "post",
data: 'value='+value+'&command='+command,
beforeSend: function() {
$.mobile.loading('show');
},
success: function(response, textStatus, jqXHR){
console.log("sucess");
replaceHtml(target,response);
},
error: function(jqXHR, textStatus, errorThrown){
console.log("error occured:"+textStatus, errorThrown);
},
complete: function(){
$.mobile.loading('hide'); //;
$.mobile.changePage(target,{transition:effect});
}
});
}
ajaxの完全な呼び出しで$.mobile.changePage（）を追加しました。コンテンツは正常に読み込まれますが、遷移効果はありません。
Le Sigh
編集：
さらにテストを行ったところ、$（document）.on（'pageinit'、function（e）{alert（ "init"）;}）;であることがわかりました。最初のajax呼び出しの後でアラートを停止します。これは私が抱えている問題と関係があるのではないかと思います。