my .live function not firing and giving me error using jquery 1.10.1 -
here html code:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>insert title here</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="js/lib/cordova-2.7.0.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/converter/temperature.js"></script> <script type="text/javascript" charset="utf-8" src="js/converter/temperaturecontents.js"></script> <script type="text/javascript"> $(document).ready(function() { alert("fgfgf"); }); </script> </head> <body> <div data-role="page" id="converterlistpage" data-theme="b"> <div data-role="header"> <h1>unit converter</h1> </div> <div data-role="content" data-theme="e"> <ul data-role="listview" data-inset="true"> <li><a href="#" id="tempbutton">temperature</a></li> <li><a href="#">weight</a></li> <li><a href="#">currency converter</a></li> </ul> </div> </div> <div data-role="page" id="temperaturecontents" data-theme="e"> <div data-role="content"> <p>sdfsdsdsds</p> </div> </div> </body> </html> temperature.js
$('#converterlistpage').live('pageinit', function() { alert("converter list page"); $("#tempbutton").off('click').on('click',function() { //$.mobile.changepage("#temperaturecontents",null,true,true); alert("button clicked"); }); }); getting error on line:
$('#converterlistpage').live('pageinit', function() and error is:
07-31 11:01:42.405: e/web console(730): typeerror: result of expression '$('#converterlistpage').live' [undefined] not function. @ file:///android_asset/www/js/converter/temperature.js:10 after using on :
yes there no error: when putting line in dom ready: $(document).ready(function() { alert("fgfgf"); $("#tempbutton").off('click').on('click',function() { // $.mobile.changepage("#temperaturecontents",null,true,true); alert("button clicked"); }); its working when putting in temperature.js not firing event :
$('#converterlistpage').on('pageshow', function() { alert("converter list page"); $("#tempbutton").off('click').on('click',function() { // $.mobile.changepage("#temperaturecontents",null,true,true); alert("button clicked"); }); });
function live deprecated , don't exist in jquery 1.8+ been told not going explain more details.
regarding new page event handling, need use delegated handling, proper way of handling page events.
change this:
$('#converterlistpage').live('pageinit', function() { alert("converter list page"); $("#tempbutton").off('click').on('click',function() { alert("button clicked"); }); }); to this:
$(document).on('pageinit', '#converterlistpage',function() { alert("converter list page"); $(document).on('click',"#tempbutton",function() { alert("button clicked"); }); }); working jsfiddle example: http://jsfiddle.net/gajotres/pmrdn/66/
few notes:
- page event bound document object, in case don't care if page
#converterlistpageexist or don't exist propagate @ point when page becomes available in dom. i have removed .off('click') because don't need in case of pageinit, trigger once. in case of other page events (like pagebeforeshow) use line click event:
$(document).off('click',"#tempbutton").on('click',"#tempbutton",function() {
one other thing, if page not initial page javascript going discarded. because jquery mobile strips every subsequent page of head content.
if case read article find out how solve it. if have questions feel free ask.
Comments
Post a Comment