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

Posted

技术标签:

【中文标题】需要确定在 JQuery 移动弹出窗口中单击的按钮并据此执行操作【英文标题】:Need to determine button clicked in a JQuery mobile popup and perform actions based thereon 【发布时间】:2013-11-04 07:50:52 【问题描述】:

我遇到了 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>

【问题讨论】:

以下任何答案对您有用吗? 【参考方案1】:

使用popupafterclose 取消绑定任何附加的click 事件。另外,请注意data-role=popup 的直接父级应该是data-role=page

$(document).on("popupafterclose", "#customDialog", function () 
  $('#customDialog a').off('click');
);

Demo

注意:要更改按钮的文本,请使用.ui-btn-inner 选择器,即$("#customDialog .customDialogOption1 .ui-btn-inner").text(button1),以免丢失按钮样式。

更新:如果您想使用上述说明,则需要取消绑定单击.ui-btn-inner,即$('#customDialog a .ui-btn-inner').off('click');

【讨论】:

【参考方案2】:

问题是因为每次连续打开弹出窗口时,您都会为每个按钮附加另一个事件。您可以通过使用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 重新附加。

【讨论】:

以上是关于需要确定在 JQuery 移动弹出窗口中单击的按钮并据此执行操作的主要内容,如果未能解决你的问题,请参考以下文章

滚动页面时隐藏jquery移动弹出窗口

尝试通过单击打开它的 div 中断按钮外部来关闭弹出窗口

使用 JQuery 隐藏页面上的按钮

不阻止 UI 的 jQuery 移动弹出窗口

jquery弹出关闭功能不起作用

ROBOT Framework无法单击弹出接受按钮