我在一个 JQM 网站上工作，我遇到了一件非常奇怪的事情，我不确定是什么原因造成的。
当我尝试在通过 ajax 加载的页面上使用其中一个 JQM 数据转换时，问题就出现了。我的流程如下。单击链接时，我使用 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 时，我 ajax 到 process.php，它返回放置到目标 div 中的 html。在这种情况下，目标 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。除了没有任何转换似乎正在触发这一事实之外，一切似乎都正常工作。当我单击链接时，页面会闪烁并且新内容就在那里。我不确定我错过了什么，我整天都在网上搜索，试图找出我做错了什么。
我将 JQM 1.2.0 与 JQuery 1.8.2 一起使用
一个奇怪的效果是，当我第一次加载页面时，“#home”页面上的所有转换似乎都有效......当我尝试点击通过 ajax 添加到页面的链接时，转换失败. 我相信我在向 DOM 添加新内容的方式上做错了，因为 JQM 可能无法正确初始化它？
请帮忙 :D
编辑：
我刚刚注意到的另一件事是，当我通过 ajax 加载 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>";
}
“数据固定”似乎根本不起作用，标题呈现但它不是固定的，它只是像任何其他元素一样附加到页面顶部。我做了一些搜索，发现有一种方法可以通过使用 .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()。内容加载良好..但仍然没有过渡效果。
乐叹息
编辑：
更多测试，我发现 $(document).on('pageinit', function(e) { alert("init");}); 在第一次 ajax 调用后停止警报。我认为这可能与我遇到的问题有关。