Question

这一直困扰着我。

我的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>

show_m_userpictures.php脚本生成一个包含图片的div和一个删除按钮，如下所示：

<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>

我在单独的js文件中有以下javascript代码。

$(document).on('pageshow', '#pictures', function() {
alert('pageshow pictures ');

$("[id=deletepicturebutton]").on('click', 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";

                }
            }
        });
    });

});

}）;

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);

这很有效！但这不是我想要的，因为那时我不能正确使用回调。所以第一次加载的页面不知道对话框（???）。

Answer 1

很难找出在这种情况下到底发生了什么。如果您可以发布一个重现案例的工作示例，那将会有很大帮助。

我修改了代码的某些部分。请注意，在您的实现中，多次调用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>

我希望这会有所帮助。

jquery移动对话框导航不起作用

1 个答案: