当前位置: 动力学知识库 > 问答 > 编程问答 >

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

问题描述:

I am having a problem with a JQM popup. The popup has 3 buttons, and the action taken in the main program depends on which button is clicked. The code in the main program is run more than once and I am not sure why.

The simple example below uses an alert to display which button on the popup was clicked. When the popup is called the first time, it works as hoped, the 2nd time, the alert is displayed twice, the 3rd time, the alert is displayed 3 times, etc.

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

网友答案:

Use popupafterclose to unbind any attached click event. Also, note the direct parent of data-role=popup should be data-role=page.

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

Demo

Note: To change button's text, use .ui-btn-inner selector i.e. $("#customDialog .customDialogOption1 .ui-btn-inner").text(button1) in order not to lose button style.

Update: If you wish to go with the above note, you then need to unbind click .ui-btn-inner i.e. $('#customDialog a .ui-btn-inner').off('click');

网友答案:

The issue is because you are attaching another event to each button for every successive time the popup is opened. You can prevent this by using one() to attach the events:

$("#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");
});

Alternatively, you could remove all the events attached to the buttons first by adding the following line at the start of your doCustomDialog function:

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

Then you can re-attach then using on as you currently do.

分享给朋友:
您可能感兴趣的文章:
随机阅读: