OnsenUI - Select 元素与 jQuery/JS（ons-template 问题？）

Question

我是 OnsenUI 的新手，到目前为止我真的很喜欢它的外观和感觉。我将它与纯 JS 和一点 jQuery.

一起使用

我的问题是：当我使用 ons-template 时，我无法使用 JS 或 jQuery select 任何东西（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

这里的问题是脚本执行时，模板还没有加载到splitter-content中，所以没有id为"book"的元素。

解决方法是在main.html页面初始化时添加事件监听器。这样，您就可以确定模板已加载，并且您可以 select 该模板上存在的任何 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>

OnsenUI - Select 元素与 jQuery/JS（ons-template 问题？）

OnsenUI - Select element with jQuery/JS (ons-template issue?)

html

jquery

cordova

onsen-ui

onsen-ui2