I’m using jQuery Mobile 1.1.1 and am using Dialogs. I’m using the dialog to choose which element to add to a <ul>. I’ve googled and search for similar issue on SO but no luck so far.
To add multiple elements to the <ul>I need to open my dialog multiple times and I’m trying to avoid having to re-create the dialog each time I open it. My problem is that my onClick event of my OkButtonPopup button triggers too many times (the first time, it triggers once, the second time, it triggers twice, the third time it triggers 3 times and so on…).
I don’t get why this is happening…
Below is the (simplified) code that gives me trouble.
<!doctype html>
<html>
<head>
<title>Problem with Dialog re-use</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Problem with Dialog re-use</h1>
</div>
<div data-role="content">
<p><h2>Activated by</h2></p>
<ul id="activate_ul">
<!-- li to be added dynamically-->
</ul>
<a href="javascript:addPopup()" data-rel="popup" data-role="button">Add</a>
</div>
</div>
<div id="myDialog" data-role="dialog">
<div data-role="header" data-theme="d">
<h1>My Elements</h1>
</div>
<div id="myDialogContent" data-role="content" data-theme="c">
<p>Element Type</p>
<select id="element-type">
<!-- options to be added dynamically-->
</select>
<p>Element Name</p>
<select id="element-list">
<!-- options to be added dynamically-->
</select>
<a href="#" id="OkButtonPopup" data-role="button" data-rel="back" data-theme="b">Ok</a>
</div>
</div>
<script type="text/javascript">
var all_inputs = ["myInput1","myInput2","myInput3","myInput4"];
var all_outputs = ["myOutput1","myOutput2","myOutput3","myOutput4"];
var all_zones = ["myZone1","myZone2","myZone3","myZone4"];
function updateInputList() {
$('#element-list').empty();
for (var i = 0; i < all_inputs.length; i++ ) {
$('#element-list').append('<option value="'+all_inputs[i]+'">'+all_inputs[i]+'</option>');
}
}
function updateOutputList() {
$('#element-list').empty();
for (var i = 0; i < all_outputs.length; i++ ) {
$('#element-list').append('<option value="'+all_outputs[i]+'">'+all_outputs[i]+'</option>');
}
}
function updateZoneList() {
$('#element-list').empty();
for (var i = 0; i < all_zones.length; i++ ) {
$('#element-list').append('<option value="'+all_zones[i]+'">'+all_zones[i]+'</option>');
}
}
function removeByValue(arr, val) {
for(var i=0; i<arr.length; i++) {
if(arr[i] == val) {
arr.splice(i, 1);
break;
}
}
}
function addPopup() {
$('#element-type').empty();
$('#element-type').append('<option value="Input">Input</option>')
.append('<option value="Output">Ouput</option>')
.append('<option value="Zone">Zone</option>');
updateInputList();
$('#element-type').change();
$('#element-type').on("change", function() {
if ($("option:selected", this).attr('value') == "Input") {
updateInputList();
}
if ($("option:selected", this).attr('value') == "Output") {
updateOutputList();
}
if ($("option:selected", this).attr('value') == "Zone") {
updateZoneList();
}
$('#element-list').selectmenu('refresh');
});
// Event triggered too many times!! Why???
$('#OkButtonPopup').on("click", function() {
$('#activate_ul').append('<li>' + $('#element-list').val() +'</li>');
// remove element from corresponding array
if ($('#element-type').val() == 'Input' ) {
removeByValue(all_inputs, $('#element-list').val());
}
if ($('#element-type').val() == 'Output' ) {
removeByValue(all_outputs, $('#element-list').val());
}
if ($('#element-type').val() == 'Zone' ) {
removeByValue(all_zones, $('#element-list').val());
}
});
$.mobile.changePage("#myDialog", { role: "dialog" });
}
</script>
</body>
</html>
Any help would be much appreciated 🙂
Everytime you call addPopup, you keep on attaching the click event to OkButtonPopup, hence, the event handler gets called a couple of times. You can try to attach the event through bind and unbind it prior to binding. You can do it this way:
Or you can also attach the click event on pageshow instead of doing it in addPopup. That way you bind it only once.