javascript - Click functions do not fire without page refresh -
ok, have seen ask many times, , solutions thant work other users. none has satisfied need.
in nutshell, using jquery mobile a ui touch screen desktop browser application.
my index page contains 2 jqm pages (#page1, #page2), every click event works fine within dom ready function. when change external page after #page2 via
$.mobile.changepage("newpage.php?param1=1¶m2=2"), { transition : "slide"} ); parameters passed fine, however, none of click events work without requiring page refresh. when reload page gravy, notice again if navigate index page external page, continue have same problem unless refresh done.
any insight appreciated....noting out there has remotely worked. , not going use page refresh work around. thank in advance.
my apologies no code example, thought problem rather trivial. here goes..
document 1(index.php) javascript
<script> $(document).ready(function() { ////////home functions $( "#issuespincoilbtn").click(function() { $.mobile.changepage( "#issuetospin1", { transition : "slide"} ); }); $( "#issuerollbalancebtn").click(function() { $.mobile.changepage( "#issuetorollbalance1", { transition : "slide"} ); }); /////////issue spin page 1 functions $( "#11inbtn").click(function() { $.mobile.changepage( "#issuetospin2", { transition : "slide"} ); }); $( "#15inbtn").click(function() { $.mobile.changepage( "#issuetospin2", { transition : "slide"} ); }); $( "#18inbtn").click(function() { $.mobile.changepage( "#issuetospin2", { transition : "slide"} ); }) $( "#navrestartfromspinpage1").click(function() { $.mobile.changepage( "#home", { transition : "slide"} ); $("#selectionsform")[0].reset(); }); $( "#findcoilbtn1").click(function() { $.mobile.changepage( "issuetospinresults1.php?width="+ $('input[name=widthradio]:checked').val() + "&gauge=" + $('input[name=gaugeradio]:checked').val() + "&color=" + $("#selectcolor").val(), { transition : "slide"} ); $("#selectionsform")[0].reset(); }); });///end dom ready </script> document 1(index.php) html body
<body> <div data-role="page" class="ui-body-a" id="home" name="home"> <div data-role="header"> </div><!-- /header --> <div role="main" class="ui-content" style="padding:50px;"> <h1>please select form following options:</h1> <div align="center"> <input id="issuespincoilbtn2" name="issuespincoilbtn2" data-icon="arrow-r" data-iconpos="top" value="issue spin coil inventory" type="button"><br /><br /><br /> <input id="issuespincoilbtn" name="issuespincoilbtn" data-icon="arrow-r" data-iconpos="top" value="issue spin coil inventory non tracked lot" type="button"><br /><br /><br /> <input id="issuerollbalancebtn" name="issuerollbalancebtn" data-icon="arrow-r" data-iconpos="top" value="issue roll balance inventory" type="button"> </div> </div><!-- /content --> <div data-role="footer" data-fullscreen="true" data-position="fixed"> </div><!-- /footer --> </div><!-- /page --> <div data-role="page" class="ui-body-a" id="issuetospin1" name="issuetospin1"> <div data-role="header"> </div><!-- /header --> <div role="main" class="ui-content" style="padding:50px;"> <h1 align="center">issuing spin coil inventory non tracked lot</h1><br /> <div align="center"> <form id="selectionsform" name="selectionsform"> <fieldset data-role="controlgroup" data-type="horizontal" data-inline="true"> <legend align="center"><h3>select coil width:</h3></legend> <input name="widthradio" id="widthradio1" value="11.8750" type="radio"> <label for="widthradio1">11.8750"</label> <input name="widthradio" id="widthradio2" value="15.0000" type="radio"> <label for="widthradio2">15.0000"</label> <input name="widthradio" id="widthradio3" value="18.0000" type="radio"> <label for="widthradio3">18.0000"</label> </fieldset> <fieldset data-role="controlgroup" data-type="horizontal" data-inline="true"> <legend align="center"><h3>select coil gauge:</h3></legend> <input name="gaugeradio" id="gaugeradio1" value=".0270" type="radio"> <label for="gaugeradio1">0.027"</label> <input name="gaugeradio" id="gaugeradio2" value=".0320" type="radio"> <label for="gaugeradio2">0.032"</label> </fieldset> <span data-inline="true"> <label for="selectcolor" class="select"><h3 align="center">select color</h3></label> <select name="selectcolor" id="selectcolor" data-native-menu="false"> <option>colors</option> <? while ($rowallcolors = mssql_fetch_array($allcolorquery)) { echo "<option value=\"$rowallcolors[colorcode]\">$rowallcolors[colorname]</option>"; } ?> </select> </span> </form> </div> </div><!-- /content --> <div data-role="footer" style="overflow:hidden;" data-fullscreen="true" data-position="fixed"> <div data-role="navbar"> <ul> <!-- <li><a id="navbackfromspin1" name="navbackfromspin1" href="#" data-icon="arrow-l">go back</a></li> --> <li><a id="navrestartfromspinpage1" name="navrestartfromspinpage1" data-icon="refresh">start over</a></li> <li><a id="findcoilbtn1" name="findcoilbtn1" data-icon="arrow-r" data-rel="external" >find coil</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer --> </div><!-- /page --> </body> document 2(issuetospinresults1.php) javascript
$(document).ready(function() { $('#gobacktooptions').click(function() { $.mobile.changepage( "index.php#issuetospin1", { transition : "slide"} ); }); $('#navrestart').click(function() { $.mobile.changepage( "index.php", { transition : "slide"} ); }); $('#printtagbtn').click(function() { var datastring = "itemid=" + $('input[name=coilchoice]:checked').val() + "&weight=" + $('#coil_weight').html(); $.ajax({ type: "post", url: "docreatespintag1.php", data: datastring, success: function(data) { $.mobile.changepage( "index.php", { transition : "slide"} ); } }); }); $('#0').click(function() { $('#coil_weight').html( $('#coil_weight').html() + '0' ) }); $('#1').click(function() { $('#coil_weight').html( $('#coil_weight').html() + '1' ) }); $('#2').click(function() { $('#coil_weight').html( $('#coil_weight').html() + '2' ) }); $('#3').click(function() { $('#coil_weight').html( $('#coil_weight').html() + '3' ) }); $('#4').click(function() { $('#coil_weight').html( $('#coil_weight').html() + '4' ) }); $('#5').click(function() { $('#coil_weight').html( $('#coil_weight').html() + '5' ) }); $('#6').click(function() { $('#coil_weight').html( $('#coil_weight').html() + '6' ) }); $('#7').click(function() { $('#coil_weight').html( $('#coil_weight').html() + '7' ) }); $('#8').click(function() { $('#coil_weight').html( $('#coil_weight').html() + '8' ) }); $('#9').click(function() { $('#coil_weight').html( $('#coil_weight').html() + '9' ) }); $('#backspace').click(function() { $('#coil_weight').html( function(index,value){ return value.substr(0,value.length-1); }) }); $('#clear').click(function() { $('#coil_weight').html(''); }); });///end dom ready document 2(issuetospinresults1.php) html
<body> <div data-role="page" class="ui-body-a" id="spinresults1" name="spinresults1"> <div data-role="header"> </div><!-- /header --> <div role="main" class="ui-content" style="padding:50px;"> <h1>here found:</h1> <div align="center"> <? ///////////select matching coil////// if(mssql_num_rows($coilmatchesquery) != 0){ echo "<fieldset data-role=\"controlgroup\"> <legend>select coil , enter weight create tag:</legend>"; $i = 1; while ($rowcoilmatches = mssql_fetch_array($coilmatchesquery)) { echo "<input name=\"coilchoice\" id=\"coilchoice$i\" value=\"".trim($rowcoilmatches['itemno'])."\" type=\"radio\"> <label for=\"coilchoice$i\">".trim($rowcoilmatches['itemno'])." - ".trim($rowcoilmatches['description'])."</label>"; $i++; } echo "</fieldset>"; }//end if else{ echo "<h3>0 coil matches</h3>"; }//end else ?> <div id="weight" align="center"> <h2 align="center">enter weight</h2> </div> <div align="center" style="font-size:36px; font-weight:bold;"><span id="coil_weight" style="font-size:36px; font-weight:bold;"></span> lbs</div> <br /> <table align="center" border="0" cellspacing="5" cellpadding="5" width="400px"> <tr> <td width="33%"><input id="7" type="button" value="7"></td> <td width="33%"><input id="8" type="button" value="8"></td> <td width="33%"><input id="9" type="button" value="9" ></td> </tr> <tr> <td width="33%"><input id="4" type="button" value="4" ></td> <td width="33%"><input id="5" type="button" value="5" ></td> <td width="33%"><input id="6" type="button" value="6" ></td> </tr> <tr> <td width="33%"><input id="1" type="button" value="1" ></td> <td width="33%"><input id="2" type="button" value="2" ></td> <td width="33%"><input id="3" type="button" value="3" ></td> </tr> <tr> <td width="33%"><input id="0" type="button" value="0"></td> <td width="33%"><input id="backspace" type="button" value="←bksp" ></td> <td width="33%"><input id="clear" type="button" value="clear"></td> </tr> <tr> </tr> </table> <div style="width:400px; margin-left:auto; margin-right:auto;"><a href="" data-iconpos="right" data-icon="arrow-r" data-role="button" id="printtagbtn">print coil tag</a></div> </div><!-- /content --> <div data-role="footer" style="overflow:hidden;" data-fullscreen="true" data-position="fixed"> <div data-role="navbar"> <ul> <li><a id="navrestart" name="navrestart" data-icon="refresh" data-transition="slide" >start over</a></li> <li><a id="gobacktooptions" name="gobacktooptions" data-icon="arrow-l" data-transition="slide" >change options</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer --> </div><!-- /page --> </body> hopefully clarify few things. thank again.
first, seems $.mobile.changepage deprecated, might wnat consider using pagecontainer.change() instead.
with limited information, might hard give full answer. my assumption using $("selector").click(...) define click events.
when changepage loads new content dynamically, new buttons not have onclick events bound them.
your best option use:
$(document).on("click", "selector", ...handler...); 
Comments
Post a Comment