我在使用 JQM 弹出窗口时遇到问题。弹出窗口有 3 个按钮，主程序中采取的操作取决于单击哪个按钮。主程序中的代码运行了不止一次，我不确定为什么。
下面的简单示例使用警报来显示弹出窗口中的哪个按钮被单击。第一次调用弹出窗口时，它按预期工作，第 2 次，警报显示两次，第 3 次，警报显示 3 次，依此类推。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova-2.6.0.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"/></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>
<script>
function doCustomDialog(text1,button1,button2,button3,callback)
{
$("#customDialog .customDialogDesc").text(text1);
$("#customDialog .customDialogOption1").text(button1).on("click.customDialog", function(){
callback("option1");
});
$("#customDialog .customDialogOption2").text(button2).on("click.customDialog", function(){
callback("option2");
});
$("#customDialog .customDialogOption3").text(button3).on("click.customDialog", function(){
callback("option3");
});
$("#customDialog").popup("open");
}
</script>
</head>
<body>
<div data-role="page" id="mainPage">
<div data-role="content">
<INPUT type="button" id="confirm" value="Save data" />
<div data-role="popup" id="customDialog" data-title="Are you sure?" class="ui-content">
<p class ="customDialogDesc">???</p>
<a href="#" class ="customDialogOption1" data-role="button" data-theme="b" data-rel="back">Yes</a>
<a href="#" class ="customDialogOption2" data-role="button" data-theme="b" data-rel="back">No</a>
<a href="#" class ="customDialogOption3" data-role="button" data-theme="b" data-rel="back">Cancel</a>
</div>
</div>
</div>
<script>
$("#mainPage").on("pageshow", function(e) {
$("#confirm").click(function() {
doCustomDialog("A similar record already exists. Do you want to Update the existing record or Add a new record?", "Update", "Add", "Cancel",
function( returned )
{
//Do things depending on the button clicked, for now just display which button was clicked
alert(returned);
});
});
});
</script>
</body>
</html>
最佳答案
使用 popupafterclose 取消绑定(bind)任何附加的 click 事件。另外，请注意 data-role=popup 的直接父级应该是 data-role=page。
$(document).on("popupafterclose", "#customDialog", function () {
$('#customDialog a').off('click');
});
注意:要更改按钮的文本，请使用 .ui-btn-inner 选择器，即 $("#customDialog .customDialogOption1 .ui-btn-inner").text(button1) 为了不丢失按钮样式。
更新:如果您希望遵循上述说明，则需要取消绑定(bind)单击 .ui-btn-inner 即 $('#customDialog .ui-btn-inner').off('点击');
关于javascript - 需要确定在 JQuery 移动弹出窗口中单击的按钮并基于此执行操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19585695/