Question

我正在开发一个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>";
    }

“数据修复”似乎根本不起作用，标题渲染但它没有修复它只是像任何其他元素一样附加到页面顶部。我做了一些搜索，发现有一种方法可以强制JQM使用.trigger（'create'）重新加载元素。这修复了标题，但没有修复过渡。

编辑：

仍与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调用后停止警报。我认为这可能与我遇到的问题有关。

Answer 1

试试这个：

$(document).on( "pagebeforechange", function( e, data ) {
   console.log( e )
   console.log( data )
});

在changePage发生任何事情之前，这会触发。数据对象包含所有changePage参数，例如fromPage，transition，...

检查转换是什么。

Answer 2

对于遇到此问题的任何其他人。我的问题的原因是我一遍又一遍地使用同一个容器。我认为发生的事情是我重写内容过快而数据属性被覆盖。

所以我添加了第二个容器，一切都运行良好：）

        <div id="loadedpage" class="ui-page" data-theme="none" data-role="page" data-url="loadedpage"></div>
        <div id="loadedpage1" class="ui-page" data-theme="none" data-role="page" data-url="loadedpage1"></div>

简而言之，不要尝试过渡到你所在的同一页面.derp

Jquery Mobile转换在ajax调用后停止工作

2 个答案: