Unable to target ID after navigating back to first page from second page in jQuery Mobile Single Page Model -

Unable to target ID after navigating back to first page from second page in jQuery Mobile Single Page Model -

i origin jquery mobile have experience in jquery , javascript , seem experiencing difficulties things beingness refreshed, not loaded, or loaded in dom.

basically have 2 page document have binded tap , alter events each. on both page 1 , page 2 tap event calls same function loaded in head of document. not having issues function not beingness called yet issue lies within function , appears relate loaded dom.

here function:

function changestatus(e) { fstatus=$("#"+e).prop('title'); sid=$("#"+e).attr('rel'); if (fstatus == 'pass') { fstatus = 'fail'; $("#studentcolor_"+sid).css("background-color","#fcd1c5").css("border-color","#900"); $("#studentlist"+sid+"_link").css("background-color","#fcd1c5"); } else if (fstatus == '') { fstatus = 'pass'; $("#studentcolor_"+sid).css("background-color","#c5fcc5").css("border-color","#248703"); $("#studentlist"+sid+"_link").css("background-color","#c5fcc5"); } else if (fstatus == 'fail') { fstatus = ''; $("#studentcolor_"+sid).css("background-color","#fff").css("border-color","#fff"); $("#studentlist"+sid+"_link").css("background-color","#fff"); } $("#studentlist"+sid+"_link").prop("title",fstatus); $("#studentcolor_"+sid).prop("title",fstatus); }

upon entering page 1 first time tap event fires normal , css styles changed correctly. moving page 2 event fires none of css styles work, yet sets title correctly. move page 1 , behaves did on page 2.

so understand.. on initial page load of 1, page 2 not in dom $("#studentlist"+sid+"_link") not exist yet function works fine. upon moving page 2 $("#studentlist"+sid+"_link") exist , visible, , $("#studentcolor_"+sid) loaded in page 1 still in dom. (this not single page app)

is correct?

if error occurring because 1 of elements don't exist anymore wouldn't create sense function not work correctly on initial page load of page 1? (since element on page 2 hasn't ever been loaded)

also works fine on browser yet when set on mobile when styles stop working.

it seems thing messing in function css() call. hope explanation makes sense baffles me..

thanks help.

additional info requested: 2 html documents. both generated bit of php.

here how elements generated on page 1: (of course of study cutting out sql calls etc)

while($row = mysql_fetch_array($result)) { if ($row['passfail'] == '') { $completionstatus=''; } else if ($row['passfail'] == 'p') { $completionstatus='pass'; } else if ($row['passfail'] == 'f') { $completionstatus='fail'; } if ($completionstatus=='pass') { $bordercolor="#248703"; $backgroundcolor='#c5fcc5'; } else if ($completionstatus=='fail') { $bordercolor="#900"; $backgroundcolor='#fcd1c5'; } else if ($completionstatus == '') { $bordercolor="#ccc"; $backgroundcolor='#fff'; } echo '<div class="draggable" style="text-align:center; width:50px; position:relative; font-size:.7em; top:'.$row['studenty'].'px; left:'.$row['studentx'].'px;" title="'.$completionstatus.'" rel="'.$row['id'].'" id="student_'.$row['id'].'"><div class="round shadow draggable_student" id="studentcolor_'.$row['id'].'" style="position: relative; background-color:'.$backgroundcolor.'; border:1px solid '.$bordercolor.'; margin-left:auto; margin-right:auto; margin-bottom:3px; width:40px; height:35px; padding:0px; font-weight:bold; text-align:center; padding-top:5px; vertical-align:middle; cursor:pointer;" title="'.$completionstatus.'"></div>'.$row[$_session['student_identifier']].'</div>'; }

here how loaded page 2:

while($row = mysql_fetch_array($result)) { if ($row['passfail'] == '') { $completionstatus=''; } else if ($row['passfail'] == 'p') { $completionstatus='pass'; } else if ($row['passfail'] == 'f') { $completionstatus='fail'; } if ($completionstatus=='pass') { $bordercolor="#248703"; $backgroundcolor='background-color:#c5fcc5;'; } else if ($completionstatus=='fail') { $bordercolor="#900"; $backgroundcolor='background-color:#fcd1c5;'; } else if ($completionstatus == '') { $bordercolor="#ccc"; $backgroundcolor='background-color:#fff;'; } if ($completionstatus == '') { $readonly=' readonly'; } else { $readonly=''; } if ($row['asid']=='') { $cc++; $row['asid']=time()+$cc; } echo '<li><a href="#" style="'.$backgroundcolor.'" id="studentlist'.$row['id'].'_link"><table cellpadding="0" cellspacing="0" width="100%"><tr><td class="student_infolink" id="student'.$row['id'].'_td" title="'.$completionstatus.'" rel="'.$row['id'].'">'.$row['student_firstname'].' '.$row['student_lastname'].'</td><td align="right" width="10%"><input type="text" placeholder="score" rel="'.$row['asid'].'" id="student'.$row['id'].'_score" value="'.$row['score'].'" class="updateonchange"'.$readonly.'><div style="padding:13px; text-align:center; display:none;"><img src="preloader.gif" width="56" height="21" border="0" /></div></td></tr></table></a><a href="#edit" data-rel="popup" data-position-to="window" data-transition="pop">edit student</a></li>'; }

please disregard inline styles removed 1 time fixed up.

listeners beingness bound:

$(document).on('pageinit', function () { $(function () { function taphandler(event) { changestatus($(this).attr("id")); } $(".student_infolink").unbind("tap"); $(".draggable").unbind("tap"); $(".draggable").bind("tap", taphandler); $(".student_infolink").bind("tap", taphandler); }); });

workaround:

i able work around issue following... removing phone call id , searching off class. see below. still appreciative of help why id calls not work. much omar help!

function changestatus(e) { fstatus=$(e).prop('title'); sid=$(e).attr('rel'); if (fstatus == 'pass') { fstatus = 'fail'; $(e).find(".draggable_student").css("background-color","#fcd1c5").css("border-color","#900"); $("#studentlist"+sid+"_link").css("background-color","#fcd1c5"); } else if (fstatus == '') { fstatus = 'pass'; $(e).find(".draggable_student").css("background-color","#c5fcc5").css("border-color","#248703"); $("#studentlist"+sid+"_link").css("background-color","#c5fcc5"); } else if (fstatus == 'fail') { fstatus = ''; $(e).find(".draggable_student").css("background-color","#fff").css("border-color","#fff"); $("#studentlist"+sid+"_link").css("background-color","#fff"); } $("#student"+sid+"_td").prop("title",fstatus); $(e).prop("title",fstatus); } $(document).on('pageinit', function(e) { console.log("pageinit fired"); var pagecreated = e.target; function taphandler( event ){ changestatus($(this)); } $(".student_infolink", pagecreated).unbind("tap"); $(".draggable", pagecreated).unbind("tap"); $(".draggable", pagecreated).bind("tap", taphandler); $(".student_infolink", pagecreated).bind("tap", taphandler); });

i assume works calling id issue... reasons why?

quick, short answer... utilize classes instead of id when targeting element. dom loading multiple pages, selecting on id can bit whacky. see workaround above in edited post.

jquery-mobile