jquery移动对话框导航不工作_Jquery_Jquery Mobile

jquery移动对话框导航不工作

jquery jquery-mobile

jquery移动对话框导航不工作,jquery,jquery-mobile,Jquery,Jquery Mobile,整个上午我都很困惑我的Jquery移动页面中有一个对话框。一切都很好，但只有在我F5页面之后我现在有了下一页 <div data-role="page" id="pictures"> <div data-role="header"> <a href="#" id="logoutbutton" data-role="button" data-icon="home">Log Uit</a>

整个上午我都很困惑

我的Jquery移动页面中有一个对话框。一切都很好，但只有在我F5页面之后

我现在有了下一页

<div data-role="page" id="pictures">

        <div data-role="header">
            <a href="#" id="logoutbutton"  data-role="button" data-icon="home">Log Uit</a>
            <h1>Foto's</h1>
        </div><!-- /header -->

        <div data-role="content">
            <div class="grid_outer" id="grid_outer_pictures" style="width: 275px;margin-left: auto; margin-right: auto;">
                <div  class="grid_inner" id="grid_inner_pictures">
                    <h2 class="h2_header">Mijn Foto's</h2>

                    <?php

                    if ($nrofuserpictures < 3) {
                        echo "
                    <input value='Voeg Toe' data-icon='add' data-theme='b' type='button' id='addpicturebutton'>
                    ";
                    }
                    ?>

                    <?php
                    include 'php/show_m_userpictures.php';
                    ?>
                </div>
            </div>
        </div><!-- /content -->

        <?php
        include 'homefooter.php';
        ?>

        <!-- /footer -->
    </div><!-- /page -->

    <div data-role="dialog" id="confirmbox">
        <div data-role="header" data-icon="false">
            <h1>Bevestig</h1>
        </div><!-- /header -->

        <div data-role="content">
            <h3 id="confirmMsg">Confirmation Message</h3>

            <br>

            <center>
                <a href="#" class="btnConfirmYes" data-role="button" data-icon="check" data-mini="true" data-inline="true">&nbsp;&nbsp;&nbsp;Ja&nbsp;&nbsp;&nbsp; </a>
                &nbsp;&nbsp;&nbsp;
                <a href="#" class="btnConfirmNo" data-role="button" data-rel="back" data-icon="delete" data-mini="true" data-inline="true">Nee</a>
            </center>
        </div>
    </div>

}))

以及showConfirm功能

// confirm dialog
function showConfirm(msg, callback) {
$("#confirmMsg").text(msg);
$("#confirmbox .btnConfirmYes").on("click.confirmbox", function() {
    $("#confirmbox").dialog("close");
    callback();
});

$("#confirmbox .btnConfirmNo").off("click.confirmbox", function(r) {
});

//$.mobile.changePage("#confirmbox");
$.mobile.changePage('#confirmbox', 'pop', false, true);

}

我不明白为什么在我第一次进入页面并单击其中一个删除按钮时，对话框没有显示？？我正在做一个pageshow活动，尝试了pagebeforeshow，甚至在页面底部添加了javascript

谢谢你的帮助

更新

我试图导航到这样的外部页面

$.mobile.changePage('confirmbox.php', 'pop', false, true);

这就行了！但这不是我想要的，因为这样我就不能正确使用回调。因此，第一次加载时的页面不知何故没有意识到对话框（？？？）。

很难找出这种情况下到底发生了什么。如果你能发布一个工作实例来重现这个案例，那将非常有帮助

我修改了你代码的一些部分。请注意，在您的实现中，showConfirm方法的多次调用似乎多次附加对话框按钮上的click事件。结果是回调被多次调用

<!doctype html>
<html lang="en">

    <head>
        <title>StackOveflow Case</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script>
            $(document).on('click', '#pictures #deletepicturebutton', function (e) {
                e.preventDefault();
                var pictureid = $(this).attr('pictureid');
                alert('deletepicturebutton clicked pictureid ' + pictureid);
                showConfirm("Weet je zeker dat je deze foto wilt verwijderen ?", function () {
                    /*
                    $.ajax({
                        async: false,
                        url: "../php/process_delete_picture.php?pictureid=" + pictureid,
                        success: function (data) {
                            if (data != "") {
                                // in case of error
                                alert(data);
                            } else {
                                alert("Foto verwijderd !");
                                window.location.href = "pictures.php";

                            }
                        }
                    });
                    */
                    alert('in callback');
                });
            });

            function showConfirm(msg, callback) {
                $("#confirmMsg").text(msg);

                $("#confirmbox .btnConfirmYes").unbind("click").click(function (e) {
                    e.preventDefault();
                    $("#confirmbox").dialog("close");
                    callback();
                });

                $.mobile.changePage('#confirmbox', {
                    transition: "pop",
                    reverse: false,
                    changeHash: true
                });
            }
        </script>
    </head>

    <body>
        <div data-role="page" id="pictures">
            <div data-role="header">
                <a href="#" id="logoutbutton" data-role="button" data-icon="home">Log Uit</a>
                 <h1>Foto's</h1>

            </div>
            <!-- /header -->
            <div data-role="content">
                <div class="grid_outer" id="grid_outer_pictures" style="width: 275px;margin-left: auto; margin-right: auto;">
                    <div class="grid_inner" id="grid_inner_pictures">
                         <h2 class="h2_header">Mijn Foto's</h2>

                        <div class='picture'>
                            <img id='userpicture' width='170' height='139.4' src='../users/annet/pictures/example.png' pictureid='30' class='unapproved' />
                        </div>
                        <div style='min-width: 150px; max-width: 150px;'>
                            <input value='Verwijder' data-icon='delete' data-theme='b' type='button' id='deletepicturebutton' pictureid='30'>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /page -->
        <div data-role="dialog" id="confirmbox">
            <div data-role="header" data-icon="false">
                 <h1>Bevestig</h1>

            </div>
            <!-- /header -->
            <div data-role="content">
                 <h3 id="confirmMsg">Confirmation Message</h3>

                <br>
                <center>
                    <a href="#" class="btnConfirmYes" data-role="button" data-icon="check" data-mini="true" data-inline="true">&nbsp;&nbsp;&nbsp;Ja&nbsp;&nbsp;&nbsp;</a>&nbsp;&nbsp;&nbsp;
                    <a href="#" class="btnConfirmNo" data-role="button" data-rel="back" data-icon="delete" data-mini="true" data-inline="true">Nee</a>
                </center>
            </div>
        </div>
    </body>

</html>


StackOveflow案例
$（文档）。在（'单击'，'图片'#删除图片按钮'上，函数（e）{
e、 预防默认值（）；
var pictureid=$（this.attr（'pictureid'）；
警报（'deletepicturebutton clicked pictureid'+pictureid）；
showConfirm（“您是否愿意为您提供服务？”，功能（）{
/*
$.ajax({
async:false，
url:“../php/process_delete_picture.php？pictureid=“+pictureid，
成功：功能（数据）{
如果（数据！=“”）{
//万一出错
警报（数据）；
}否则{
警报（“Foto verwijderd！”）；
window.location.href=“pictures.php”；
}
}
});
*/
警报（“在回调中”）；
});
});
函数showConfirm（消息，回调）{
$（“#confirmMsg”）.text（msg）；
$（“#confirmbox.btnConfirmYes”）。解除绑定（“单击”）。单击（函数（e）{
e、 预防默认值（）；
$（#confirmbox”）。对话框（“关闭”）；
回调（）；
});
$.mobile.changePage（“#confirbox”{
过渡：“流行”，
反面：错，
changeHash:true
});
}
福托的
米恩·福托
贝夫斯蒂格
确认信息

我希望这有帮助。

您尝试了BeforePageShow或

pagebeforeshow

？pagebeforeshow，很抱歉，是post中的输入错误，我将更正此错误，以便在不更改更改页面选项的情况下调用对话框。我已经尝试过了，没有任何选项，changepage仅在“硬”刷新页面后才能工作。是否在代码中的任何位置使用document ready？您是指“[id=deletepicturebutton]”标记？对于相应的按钮，此操作仅触发一次，而不是多次。这应该是常规的Jquery逻辑，我经常在非移动WebAAP上使用它。你的例子不起作用。。。。。我需要F5页面才能触发事件。我几乎可以肯定is与生成的多个按钮和多个事件有关，但我不知道是怎么回事。我指的是showConfirm方法。如果多次按下确认按钮，则会多次附加click事件并多次调用回调。我发布的代码似乎按原样工作。这就是为什么我问你是否有可能提供一个复制这个问题的例子。如果无法重现问题，很难猜测根本原因。

$.mobile.changePage('confirmbox.php', 'pop', false, true);

<!doctype html>
<html lang="en">

    <head>
        <title>StackOveflow Case</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script>
            $(document).on('click', '#pictures #deletepicturebutton', function (e) {
                e.preventDefault();
                var pictureid = $(this).attr('pictureid');
                alert('deletepicturebutton clicked pictureid ' + pictureid);
                showConfirm("Weet je zeker dat je deze foto wilt verwijderen ?", function () {
                    /*
                    $.ajax({
                        async: false,
                        url: "../php/process_delete_picture.php?pictureid=" + pictureid,
                        success: function (data) {
                            if (data != "") {
                                // in case of error
                                alert(data);
                            } else {
                                alert("Foto verwijderd !");
                                window.location.href = "pictures.php";

                            }
                        }
                    });
                    */
                    alert('in callback');
                });
            });

            function showConfirm(msg, callback) {
                $("#confirmMsg").text(msg);

                $("#confirmbox .btnConfirmYes").unbind("click").click(function (e) {
                    e.preventDefault();
                    $("#confirmbox").dialog("close");
                    callback();
                });

                $.mobile.changePage('#confirmbox', {
                    transition: "pop",
                    reverse: false,
                    changeHash: true
                });
            }
        </script>
    </head>

    <body>
        <div data-role="page" id="pictures">
            <div data-role="header">
                <a href="#" id="logoutbutton" data-role="button" data-icon="home">Log Uit</a>
                 <h1>Foto's</h1>

            </div>
            <!-- /header -->
            <div data-role="content">
                <div class="grid_outer" id="grid_outer_pictures" style="width: 275px;margin-left: auto; margin-right: auto;">
                    <div class="grid_inner" id="grid_inner_pictures">
                         <h2 class="h2_header">Mijn Foto's</h2>

                        <div class='picture'>
                            <img id='userpicture' width='170' height='139.4' src='../users/annet/pictures/example.png' pictureid='30' class='unapproved' />
                        </div>
                        <div style='min-width: 150px; max-width: 150px;'>
                            <input value='Verwijder' data-icon='delete' data-theme='b' type='button' id='deletepicturebutton' pictureid='30'>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /page -->
        <div data-role="dialog" id="confirmbox">
            <div data-role="header" data-icon="false">
                 <h1>Bevestig</h1>

            </div>
            <!-- /header -->
            <div data-role="content">
                 <h3 id="confirmMsg">Confirmation Message</h3>

                <br>
                <center>
                    <a href="#" class="btnConfirmYes" data-role="button" data-icon="check" data-mini="true" data-inline="true">&nbsp;&nbsp;&nbsp;Ja&nbsp;&nbsp;&nbsp;</a>&nbsp;&nbsp;&nbsp;
                    <a href="#" class="btnConfirmNo" data-role="button" data-rel="back" data-icon="delete" data-mini="true" data-inline="true">Nee</a>
                </center>
            </div>
        </div>
    </body>

</html>