OnsenUI - Выберите элемент с jQuery/JS (проблема с шаблоном?)

Question

Я совершенно новый для OnsenUI, и до сих пор я действительно наслаждаюсь внешним видом и ощущением. Я использую его с простым JS и немного jQuery.

Моя проблема: Я не могу выбрать что-либо (ID, класс и т. Д.) С использованием JS или jQuery, пока я использую ons-шаблон.

Когда я удаляю это, у меня нет никаких проблем, buuuut Я использую 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

Проблема заключается в том, что при выполнении сценария шаблон по-прежнему не загружается в разделитель-контент, поэтому нет элемента с идентификатором «книга».

Решение состоит в том, чтобы добавить слушателя событий в инициализацию страницы main.html. Таким образом, вы уверены, что шаблон загружен, и вы можете выбрать любую из идентификаторов, присутствующих в этом шаблоне.

ПРИМЕЧАНИЕ: Обязательно добавьте идентификатор на элементе <ons-page>.

Как добавить слушателя или вызвать функцию инициализации страницы:

<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>