这让我整个上午都感到困惑。
我的 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"> Ja </a>
<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);
那行得通！但这不是我想要的，因为那样我就不能正确使用回调。所以不知何故，第一次加载的页面不知道对话框（？？？）。