I am finding that an event I have defined for a button is not only firing when the button is clicked, but also when the back button is clicked. I have the following code:
What I have found, is if I click on the Add to Favorites button I get the alert like I expect. Then if I click the back button, I get the alert again a second time. However if I view the page and do no click the Add to Favorites button and click the back button I do not get the alert. Any help would be greatly appreciated.
<div class="back-button-show" data-role="view" data-layout="app" data-show="getVendorDetails" data-title="" id="vendor-details"> <div id="vendor-detail-div"> <div id="vendor-detail-name" data-bind="text: name"></div> <div id="vendor-detail-tagline" data-bind="text: tag_line"></div> <div id="vendor-detail-url" data-bind="text: url"></div> <div id="vendor-detail-about" data-bind="text: about"></div> <a class="button-left" data-role="button" data-click="addToFavoritesClick">Add to Favorites</a> <a class="button-right" data-role="button" data-click="addToContacts">Add to Contacts</a> </div></div> <div data-role="layout" data-id="app" data-show="layoutShowInit"> <header data-role="header"> <div data-role="navbar"> <a class="nav-button" data-role="backbutton" data-align="left">Back</a> <span data-role="view-title">Demo Conference</span> </div> </header> <footer data-role="footer"> <div data-role="tabstrip"> <a href="#main-page" data-icon="info">Info</a> <a href="#vendors" data-icon="organize">Vendors</a> <a href="#favorite-vendors" data-icon="favorites">Saved Vendors</a> </div> </footer> </div><script>var addToFavoritesClick = function(e) { alert("This is a test"); };</script>What I have found, is if I click on the Add to Favorites button I get the alert like I expect. Then if I click the back button, I get the alert again a second time. However if I view the page and do no click the Add to Favorites button and click the back button I do not get the alert. Any help would be greatly appreciated.