OnsenUI - jQuery/JS로 요소 선택 (ons-template issue?)

Question

저는 OnsenUI의 새로운 제품입니다. 지금까지 나는이 모든 것을 실제로 즐기고 있습니다. 일반 JS 및 약간의 jQuery와 함께 사용하고 있습니다.

내 문제는 : ons-template을 사용하는 동안 JS 또는 jQuery를 사용하여 ID, 클래스 등을 선택할 수 없습니다.

제거 할 때 문제가 없으므로 내 탐색 방법으로 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

스크립트가 실행될 때 템플리트가 여전히 스플리터 컨텐츠로로드되지 않으므로 "book"id라는 요소가 없습니다.

해결 방법은 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>