Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!
PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.
PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.
Table of Contents
Intro
Update: This page used to have embedded working examples, unfortunately, iframes heavily prolonged page loading so I moved the here. Or you can access them directly via below examples.
$(document).on('pagebeforeshow','#index' ,function(e,data){ $(document).on('click', '#test-button',function(e) { alert('Button click'); }); });
Solution 1
$(document).on('pageinit', '#index', function(){ $(document).on('click', '#test-button',function(e) { alert('Button click'); }); });
HTML
<!DOCTYPE html> <html> <head> <title>jQM Complex Demo</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> <body> <div data-role="page" id="index"> <div data-theme="a" data-role="header"> <h3> First Page </h3> <a href="#second" class="ui-btn-right">Next</a> </div> <div data-role="content"> <a data-role="button" id="test-button">Click me</a> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> <div data-role="page" id="second"> <div data-theme="a" data-role="header"> <h3> Second Page </h3> <a href="#index" class="ui-btn-left">Back</a> </div> <div data-role="content"> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> </body> </html>
JavaScript
$(document).on('pageinit', '#index', function(){ $(document).on('click', '#test-button',function(e) { alert('Button click'); }); });
Solution 2
$(document).on('pagebeforeshow', '#index', function(){ $(document).off('click', '#test-button').on('click', '#test-button',function(e) { alert('Button click'); }); });
HTML
<!DOCTYPE html> <html> <head> <title>jQM Complex Demo</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> <body> <div data-role="page" id="index"> <div data-theme="a" data-role="header"> <h3> First Page </h3> <a href="#second" class="ui-btn-right">Next</a> </div> <div data-role="content"> <a data-role="button" id="test-button">Click me</a> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> <div data-role="page" id="second"> <div data-theme="a" data-role="header"> <h3> Second Page </h3> <a href="#index" class="ui-btn-left">Back</a> </div> <div data-role="content"> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> </body> </html>
JavaScript
$(document).on('pagebeforeshow', '#index', function(){ $(document).off('click', '#test-button').on('click', '#test-button',function(e) { alert('Button click'); }); });
Continue to the next page