需要确定在 JQuery 移动弹出窗口中单击的按钮并基于此执行操作

Need to determine button clicked in a JQuery mobile popup and perform actions based thereon

本文关键字：按钮 单击 操作 执行 于此 窗口 JQuery 移动      更新时间：2023-09-26

我在 JQM 弹出窗口时遇到问题。 弹出窗口有 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 取消绑定任何附加的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)，以免丢失按钮样式。

更新：如果您希望使用上述注释，则需要取消绑定单击.ui-btn-inner即 $('#customDialog a .ui-btn-inner').off('click');

问题是因为每次打开弹出窗口时，您都会将另一个事件附加到每个按钮。您可以通过使用 one() 附加事件来防止这种情况：

$("#customDialog .customDialogOption1").text(button1).one("click.customDialog", function(){ 
    callback("option1");
});
$("#customDialog .customDialogOption2").text(button2).one("click.customDialog", function(){ 
    callback("option2");
});
$("#customDialog .customDialogOption3").text(button3).one("click.customDialog", function(){ 
    callback("option3");
});

或者，您可以通过在doCustomDialog函数的开头添加以下行来首先删除附加到按钮的所有事件：

$("#customDialog a").off();

然后，您可以像当前一样使用on重新附加。

相关文章：