jquery selectors - DOM elements not accessible after onsen pageinit in ons.ready -

jquery selectors - DOM elements not accessible after onsen pageinit in ons.ready -

i using onsen framework jquery , jquery mobile, appears there no way grab event fires 1 time new page loaded.

my current code, executes in index.html file (the master page)

<script src="scripts/jquery.js"></script> <script src="scripts/jquery.mobile.custom.min.js"></script> <script src="scripts/app.js"></script> <script> ons.bootstrap(); ons.ready(function() { $(document.body).on('pageinit', '#recentpage', function() { initrecentpage(); }); });

in app.js next code

function initrecentpage() { $("#yourreports").on("tap", ".showreport", recentshowreport); var content = document.getelementbyid("yourreports"); ons.compile(content); }

and html:

<ons-page id="recentpage"> <ons-toolbar id="mytoolbar"> <div id="toolbartitle" class="center">recent checks</div> <div class="right"> <ons-toolbar-button ng-click="myslidingmenu.togglemenu()"> <ons-icon icon="bars"></ons-icon> </ons-toolbar-button> </div> </ons-toolbar> <ons-scroller> <h3 class="headingtitle"> checks</h3> <div id="free" class="tabarea"> <ons-list id="yourreports"> </ons-list> <ons-button id="clearfreerecentbutton"> <span id="clearrecenttext" class="bold">clear recent checks</span> </ons-button> </div> </ons-scroller> </ons-page>

in instance variable 'content' null. i've debuged significantly, , element trying not nowadays when event fires. loaded later.

so, question is, how ensure of content nowadays before using selector. feels onsen specific issue.

in end find 1 reliable way of making work. had wait, using settimeout 300 milliseconds dom elements ready. feels hack, there no other reliable way of making behave. app in app store , works well, though seems hack, works:

$(document).on('pageinit', '#homepage', function() { inithomepage(); }); function inithomepage() { settimeout(function() { setuphomepage(); }, 300); }

jquery-selectors onsen-ui