3. ons-splitter JS/jQuery select help?

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

ons-splitter JS/jQuery select help?

  • T

    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!

    0 1 Reply
  • Onsen UI

    @Tusk Welcome! I’d recommend you to start with the docs. Especially the “Templates” and “Page lifecycle” sections.

    Basically, the content of ons-template is just a string that can be used to create elements. The problem here is that, by the time you try to access those elements, they haven’t been created yet. In order to make sure they exist, just use page’s init event.

    0