OnsenUI - jQuery/JSで要素を選択する（ons-template issue？）

Question

私はOnsenUIの新作です。これまでのところ、私はその外観と感触を本当に楽しんでいます。 私はプレーンなJSと少しのjQueryを使っています。

私の問題は： 私はons-templateを使っているうちにJSやjQueryを使って何か（ID、Class等）を選択できません。

これを削除すると問題はありません。私はナビゲーションメソッドとしてons-splitterを使用しています。 （注：タブなども試しました）

私が間違っていることはありますか？

<ons-splitter> 
    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable> 
    <ons-page> 
    sidebar content etc... 
    </ons-page> 
    </ons-splitter-side> 
    <ons-splitter-content id="content" page="main.html"></ons-splitter-content> 
</ons-splitter> 

<!-- I want to select the ons-list-item #book with jQuery --> 
    <ons-template id="main.html"> 
    <ons-page> 
     <ons-toolbar> 
     <div class="left"> 
      <ons-toolbar-button onclick="fn.open()"> 
      <ons-icon icon="md-menu"></ons-icon> 
      </ons-toolbar-button> 
     </div> 
     <div class="center top-bar-title">Title</div> 
     </ons-toolbar> 
     <ons-list> 
     <ons-list-item id="book">Books</ons-list-item> 
     </ons-list> 
    </ons-page> 
    </ons-template> 

<script> 
    $("#book").click(function(){ 
     alert("TEST"); 
    }); 
</script> 

ありがとうございました！

Answer 1

ここでの問題は、スクリプトが実行されているときにテンプレートがまだスプリッタコンテンツに読み込まれないため、idが "book"の要素がないことです。

解決策は、main.htmlページの初期化時にイベントリスナーを追加することです。そうすることで、テンプレートがロードされていることを確認し、そのテンプレートに存在するIDを選択できます。

注：<ons-page>要素にIDを必ず追加してください。

どのようにリスナーを追加したり、ページの初期化に関数を呼び出す：

<ons-splitter> 
    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable> 
    <ons-page> 
    sidebar content etc... 
    </ons-page> 
    </ons-splitter-side> 
    <ons-splitter-content id="content" page="main.html"></ons-splitter-content> 
</ons-splitter> 

<!-- I want to select the ons-list-item #book with jQuery --> 
    <ons-template id="main.html"> 
    <ons-page id="main"> 
     <ons-toolbar> 
     <div class="left"> 
      <ons-toolbar-button onclick="fn.open()" tappable> 
      <ons-icon icon="md-menu"></ons-icon> 
      </ons-toolbar-button> 
     </div> 
     <div class="center top-bar-title">Title</div> 
     </ons-toolbar> 
     <ons-list> 
     <ons-list-item id="book" tappable>Books</ons-list-item> 
     </ons-list> 
    </ons-page> 
    </ons-template> 

<script> 

    document.addEventListener("init",function(event){ 

     if(event.target="main"){ 
       $("#book").click(function(){ 
        alert("TEST"); 
       }); 
     } 
    }); 

</script>