Hi,

I’m brand new to OnsenUI and so far I’m really enjoying the look and feel of it all.
I’m using it with plain JS and a little jQuery.

(UPDATE: I’m pretty sure that it’s the ‘ons-template’ that is stopping JavaScript from selecting elements)

My issue is:
I cannot select anything (ID, Class etc.) using JS or jQuery while I’m using ons-splitter/ons-splitter-content.

When I remove this I don’t have any issues, buuuut I’m using it as my navigation…

Is there something I’m doing wrong?

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

Thank you all for any help!