Onsen UI でOnsen UIフレームワーク内の要素にjQueryでアクセスできない

問題

タイトルそのままなんだけどこちらの投稿と同じ現象：
http://stackoverflow.com/questions/26407071/dom-elements-not-accessible-after-onsen-pageinit-in-ons-ready
onsen内のDOMにjQueryでアクセスできないのです。
onsen内のDOMにclickイベントを設定したいんだけど....

手元にあるhtml

<div id="onsen-element">
  <ons-navigator var="globalNavi">
    <ons-navigator var="navi" page="main.html">
    </ons-navigator>
  </ons-navigator>

  <ons-template id="main.html">
    <ons-page>
      <ons-toolbar>
        <div class="center">Navigator</div>
      </ons-toolbar>

      <div id="target"></div>
    </ons-page>
  </ons-template>
</div>

このdiv#targetをクリックしたときに発火するイベントを設定します。

ons.ready内に書いてみる

ons.ready(function(){
  $("#onsen-element #target").on('click', function() {
    console.log("hoge");
  });
});

ダメでした

setTimeout

setTimeout(function() {
  $("#onsen-element #target").on('click', function() {
    console.log("hoge");
  });
}, 300);

こちら
http://stackoverflow.com/questions/26407071/dom-elements-not-accessible-after-onsen-pageinit-in-ons-ready
にあった解決策。一応うまくいったけど避けたい書き方。。。

結論

ons-navigatorにpostpushイベントとpostpopイベントを設定したら動いた。

htmlを修正

<div id="onsen-element">
  <ons-navigator var="globalNavi">
    <ons-navigator var="navi" page="main.html">
    </ons-navigator>
  </ons-navigator>

  <script type="text/javascript">
    var foo;
    foo = function(){
      console.log("hoge");
    });

    ons.ready(function(){
      navi.on("postpush",function(e){
        foo();  
      });
      navi.on("postpop",function(e){
        foo();
      });

    });
  </script>

  <ons-template id="main.html">
    <ons-page>
      <ons-toolbar>
        <div class="center">Navigator</div>
      </ons-toolbar>

      <div id="target"></div>
    </ons-page>
  </ons-template>
</div>

<ons-navigator var="navi" ...みたいに設定したvarはons.ready内で使うみたい。

参考